Questions tagged [css-position]

The "position" property in CSS allows you to control the location of an element on the page by setting its value to static (the default setting), relative, absolute, fixed, or sticky.

Filter by
Sorted by
Tagged with
0 votes
1 answer
16 views

position: fixed; not working when backdrop-filter is used [duplicate]

As it can be seen in the snippet below, position: fixed; top: 0; left: 0; doesn't work when the parent has a backdrop-filter. Why? Notes: A solution seems to be: prefix backdrop-filter with -webkit- ...
Basj's user avatar
  • 41.6k
0 votes
2 answers
34 views

HTML page print does not fit inside Letter paper when printed

I'm dealing with a large project and part of it is printing HTML pages. However, we are dealing with the issue of pages do not fit within the Letter size paper. Please see the following simple code: ...
S Nash's user avatar
  • 2,373
0 votes
0 answers
16 views

Position element relative to a specific place of a center & cover background image

I've got a design to implement and everything works fine only I have an Issue with positioning a countdown to the background image of a room that takes a background cover size and center position, add ...
ALLAOUA Okba's user avatar
0 votes
0 answers
21 views

is it possible to display flex two divs position fixed? [closed]

I have a container inside it I created a div contain sidebar and the other div contain header and others elements ,I want to put them side to side , I display container as flex , and it's work but not ...
meeesi's user avatar
  • 37
1 vote
1 answer
21 views

The Position Sticky is no Working on my Web page [duplicate]

I'm going to make my navbar sticky targeting the ul tag but nothing changes. the position: sticky property is not working on my web. header ul { display: flex; justify-content: center; ...
Hitesh Kumar's user avatar
0 votes
1 answer
22 views

Resizing of div based on the width of the screen

I have the following code. Why is the size of the div not adjusting when I reduce the width of the screen? What I'm trying to achieve is, that the size of the div has to reduce proportionally when the ...
Thor The dog's user avatar
0 votes
0 answers
11 views

How can I apply position static once the bottom of the content is hit

I am trying to make some code have the position static once the user hits the bottom of the content. The content is larger than the screen and currently I am using top-0 so only what is displayed on ...
Jack_T's user avatar
  • 125
0 votes
0 answers
20 views

Why is my element's offsetParent its parent static element instead of its fixed grandparent?

UPDATE: I found out the CSS that causes it. It's due to an animation that has transform property. If I disable it, the offsetParent goes back to its grandparent. Now I wonder why and there isn't any ...
Luke Vo's user avatar
  • 18k
0 votes
0 answers
40 views

iOS 17: Layout Issue with Position Absolute Elements

On iOS 17, I am encountering a layout problem where the .content element seems to be covering the .header element, resulting in unexpected rendering. This issue is not consistently reproducible across ...
Sonic.S.Xiang's user avatar
1 vote
1 answer
31 views

How can i make a content be fixed when the margin of the content next to it is moving?

So I'm doing my first project in HTML and CSS, and one of the tasks is to align 4 icons side by side (horizontally) and make them "grow" a little bit when I pass the mouse over it. The ...
Guilherme Silva's user avatar
0 votes
0 answers
41 views

why when using position "fixed" in chakra ui the navbar is protrude out of screen and change width size

when add position fixed in navbar the navbar size is changed and get out of place, overlapping with below the result I need is navbar stay in place and take position fixed at top of page, and don't ...
Mohamed Ali's user avatar
0 votes
2 answers
26 views

How to apply icon over an image when images are fetching from an api

I have an api that fetches the images of dogs and I want to apply heart icon (like favourite feature) over it . When clicked , that image should also get display on the favourites section. I am not ...
Akash Anand's user avatar
0 votes
1 answer
28 views

How do I fix the position of elements in css regardless of the window size?

I am trying to set boxes so I can add other elements accordingly. However the positions of these boxes keep changing depending on the monitor I'm using or if I go on full screen mode on my browser. I ...
An Ad's user avatar
  • 3
0 votes
1 answer
31 views

Position and bottom are not working in react native [closed]

I wanted to fix this part at the bottom of the page, but it's not working. Can someone please help me? <View styles = {style.container}> <View styles = {style.card}> <...
Bharath's user avatar
0 votes
1 answer
36 views

How do I make this form center in my navigation bar ReactJS - CSS

I'm working on a web application, and I'm trying to center a div tag which is inside a flexbox, I don't understand why the flexbox isn't divided in three even parts. My code NavBar component import ...
Alonso's user avatar
  • 27
0 votes
1 answer
36 views

Div not growing with scroll of parent due to absolute positioned element

I'm encountering an issue with a CSS layout where a child div (#normal) within a parent div (#container) doesn't grow as expected when the parent's horizontal scroll increases. The problem seems to be ...
Fernando Muñoz's user avatar
0 votes
2 answers
43 views

How to make page flow continue after using absolutely positioned images?

I'd like to have objects positioned under some images that need to be overlaid. To make the images overlay I'm positioning them absolutely. But when I do this, all content that needs to go underneath ...
Colin 't Hart's user avatar
0 votes
1 answer
23 views

How can I make sure that the fixed modal is on top and that the top of the modal is also visible when the user scrolls?

Here is the code I have. Could you please help me create a more comprehensible version? import { LoginProps } from '@/layouts/layout.props'; import { Box, Button, Divider, Flex, FormControl, ...
Alirahmon's user avatar
0 votes
0 answers
17 views

How do I positon a icon on top of an element while using clip-path? The half outside of the element with clip-path applied is getting cutted

When I do an clip-path on this element, the part of the telephone icon outside of the element gets cutted. My code is very simple right now, I am using mostly bootstrap in this project: HTML: <div ...
Jonathan Yont's user avatar
0 votes
2 answers
30 views

CSS : Max width 100% of parent without height but max-height

I'm looking for something a bit strange in pure CSS (if it's possible) ... I have a modal without height but with a max-height and I have a content which should be of a certain height but it should be ...
Simon Trichereau's user avatar
0 votes
1 answer
130 views

react native absolute position being cut off by further elements

I have a two dimensional array that I'm turning into a grid of squares. some squares should have an overlay, like a circular shadow that has an absolute position. It should extend over all its ...
Yehuda's user avatar
  • 47
0 votes
0 answers
11 views

how can i use position-fixed with flexbox?

this is a simple code with two divs, when i add position-fixed class to first div , the second element will move under the first element, how can I fix this problem. <div class="d-flex"&...
Forough J's user avatar
0 votes
1 answer
31 views

Overflow cause scroll when it it have an absolute element

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>...
kan's user avatar
  • 93
0 votes
1 answer
64 views

Position Sticky not working with CSS Grid item

I have found several articles: https://melanie-richards.com/blog/css-grid-sticky/ https://ishadeed.com/article/position-sticky-css-grid/ That address an "issue" when trying to use position:...
icekomo's user avatar
  • 9,338
0 votes
1 answer
16 views

Scroll to top button created extra whitespace in the bottom

I followed some tutorial to create a CSS based floating scroll to top button. However, I noticed there is extra white space below last HTML element (e.g. last line) The height of extra whitespace ...
Patrick's user avatar
  • 4,206
0 votes
1 answer
28 views

Why the CSS property in later keyframe get applied earlier than expected in CSS animations?

Let me share pictures what I am trying to achieve, that will be more efficient, I guess: Here small box with pink center is #d1 and it's parent #dn has a center red. My objective is to co-center the ...
Coderey123's user avatar
-1 votes
1 answer
51 views

How to keep a sticky element over two CSS grid rows only?

Let's assume you are given the following HTML: <div class="grid"> <div class="sticky blue one" style="height: 50px !important"></div> <div class=&...
BernhardWebstudio's user avatar
0 votes
1 answer
58 views

position: absolute in Safari browser not working

I can't find support for a WordPress theme I'm using so am trying to fix a problem myself. The problem only occurs with the safari browser. Using safari, blocks of overlaid text do not appear. These ...
togethernet's user avatar
0 votes
1 answer
54 views

CSS positioning issue: Can not position images that floats outside a div

This is what I have to design and I am providing my code below, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-...
user22364885's user avatar
0 votes
0 answers
25 views

left and bottom values are not being recognised when using absolute position in Phoenix Liveview html template

I am trying to build a simple car race game using Phoenix Liveview / tailwind CSS and I have the below html template function cars() called by the render() function to display 6 cars at their ...
Rajenth's user avatar
0 votes
2 answers
35 views

Why does the last absolutely positioned element misbehave?

I have a parent element that is absolutely positioned, and three children. When I make the first child to be positioned absolutely, the second child moves up and behind the first. This is expected. ...
Deepak's user avatar
  • 2,660
0 votes
0 answers
13 views

Side menu popout with z-index not showing above bootstrap 5 card without z-index

On small devices I’d like when the user clicks the icon the menu is popped out. However, the menu is hiding behind the card. The only way I was able to get it to show above was by adding z-index: -1 ...
A.Mac's user avatar
  • 213
0 votes
1 answer
27 views

Setting a `margin` property to a `fixed` element with `z-index: 1`

There's a list, and a comment field. Comment field is fixed to the page bottom. When the list is long, page scroll applies.I want the bottom of the list be always at a certain vertical distance from ...
Shakalakah's user avatar
0 votes
2 answers
105 views

Tailwind.css - a "fixed" element is out the parent "container" element

I'm coming to you, requesting your gentle help. I have a fixed element that is displaying outside the container parent element on big screen...Basically, it is "fixed" from the view port ...
LNFullStack's user avatar
0 votes
2 answers
25 views

Cannot get div to show on top of video

I would like the div with the buttons to display on top of the video. I have tried z-index and positions but it does not seem to do it. <!-- jQuery 3.3.1 --> <script src="https://ajax....
Russell Ehrnsberger's user avatar
0 votes
0 answers
15 views

SVG Mask video and position absolute

I am trying to mask a video with an SVG. When I add the position absolute to the CSS my mask works but knocks out other elements on my page, eg. some lottie files and chages the dimensions of my ...
Paul 808Images's user avatar
0 votes
0 answers
27 views

centering a container with display: table; vertically and horizontally using the position: absolute; method not working?

In my project, I want to center a main element with display: table; vertically and horizontally. I've made some researches online and got some methods, also even from Stack Overflow. I got a method of ...
Coding Nerd 's user avatar
0 votes
1 answer
34 views

`position: fixed` applied to an element breaks the positioning of its content regulated by `display: flex`

I need the .word and the .line elements be fixed to the top of the viewport when the page is scrolled - in the position they initially are, i.e. the line is below the word.I managed to fix the .word ...
Shakalakah's user avatar
0 votes
2 answers
45 views

How to make a Flexbox item the same width as other items but on a new line

I want to set a Flexbox item the same width as the width of two Flexbox items combined. For example: .body { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-...
Marius's user avatar
  • 3
0 votes
0 answers
33 views

Resize all images in a gallery to cut off at the same level, HTML/CSS

I am working on my photography portfolio website and have these three images in a gallery, they are responsive and the portfolio looks great on mobile however on desktop the way the images are ...
shotbykamilo's user avatar
0 votes
1 answer
29 views

Why does top offset, when given in % doesn't move the relatively positioned element vertically?

Let's say there's a relatively positioned div element. When I set the top value in %, it does nothing at all. But as soon as I express it in px, it works. Is there any particular reason/logic? This ...
Pranav Anand's user avatar
1 vote
1 answer
25 views

Container is overflow: scroll but I want some elements to overflow from it

I have a container that is set to overflow-y: scroll, and within it I have many elements. one of them, is a dropdown menu, and I want it to be able to overflow the container. it is already set to ...
Jonathan Ribak's user avatar
0 votes
1 answer
53 views

Center DIV containing elements with display absolute

I'm trying to replicate the following design in react: Here's what I've currently got: Here's the code for it: import React, { useState } from "react"; import "./DisplayCards.css&...
Hashem A. Damrah's user avatar
0 votes
0 answers
32 views

Why doesnt fixed position work as i expected when a fixed div is a child of a fixed child?

My goal is to open side tabs and have them "recursively" open. I made a component in vue and logically it seemed to work fine. But in practice I find that each open form becomes smaller and ...
Ggwppino's user avatar
0 votes
0 answers
19 views

I set position as absolute for div with id, and set it's top, left and others in terms of % (also relative to parent), how do those % convert to px?

Given is my code snippet, both the HTML and the CSS files. index.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <...
Deepak's user avatar
  • 11
0 votes
0 answers
12 views

Position Sticky Not working on flex parent [duplicate]

Cant seem to make position sticky to work. I have a display flex content where the left is so long that I want the right div to stick until the end of the left div my structure is this <div class=&...
Koro Sensei's user avatar
0 votes
0 answers
45 views

Z-index on different positioned elements in the same page

The problem: Buttons that suppose to be behind are in front. Description: I have a react app using Tailwind css. There are two different components on the same page that in both I am using position: ...
IdoBa's user avatar
  • 61
0 votes
2 answers
53 views

CSS right prop not working when position: sticky

I am trying to align a sticky button to the right, but the right CSS property not working only the left is Please let me know why, and How can I solve? Example Below <!DOCTYPE html> <html ...
powerfulH's user avatar
0 votes
2 answers
25 views

Conditional Position Property of Navbar Component not Working in Tailwind

I am trying to show and hide a navbar based on whether a variable is set to true or false. I am able to get the Navbar to show/hide however, my problem happens when I try to set the Navbar to always ...
user310737's user avatar
0 votes
1 answer
56 views

overflow-x: scroll, with position: sticky fix?

I have a calendar, where I want the header, and the first column to be always on screen. Position sticky would make it work, if only it was not overflowing. overflow-x: scroll breaks the header, clip ...
peckan09's user avatar

1
2 3 4 5
125