This question already has answers here:
Why is a div with "position: absolute" not by default relative to the document?
(3 answers)
How does the CSS position on a div affects position of sibling division?
(2 answers)
Closed 4 years ago.
I have 2 elements in the container, one relative and one absolute. I centered them both as well using margin: auto. The first element is relatively positioned, so it doesn't move, which I understand.
However, for the second element, it being absolutely positioned, shouldn't it move to the top-left corner of the container? I thought it removed the element from the flow of the document and moved relative to the parent element, which is .container , so I'm confused why it's being positioned under the first element.
I read the mdn docs for this...but perhaps I am not understanding the wording?
Essentially, I thought my second box would fit on the same row as the first box, just in the corner, on the left.
html, body {
height: 100%;
width: 100%;
}
.container {
height: 500px;
width: 500px;
border: 1px solid black;
position: relative;
}
.box1 {
height: 100px;
width: 100px;
background: blue;
position: relative;
margin: auto;
}
.box2 {
height: 100px;
width: 100px;
background: red;
position: absolute;
margin: auto;
}
<div class='container'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
Related
This question already has answers here:
How position absolute and fixed block elements get their dimension?
(2 answers)
Closed 2 years ago.
I have a parent named "container" of size 300px x 120px that encapsulates 2 s namely "redbox" and "greenbox". when I add "position: relative" to the "container" size of child <div>s looks proportionate. however on removing the attribute size of div increases 3 times".
to my knowledge position is for positioning of elements how can it effect the size of the element.
#container {
width: 300px;
height: 120px;
/*position: relative;*/
border: solid 1px blue;
}
#redbox,
#greenbox {
border: solid 1px;
width: 60%;
height: 60%;
position: absolute;
}
#redbox {
background-color: red;
left: 0px;
top: 0px;
}
#greenbox {
background-color: rgb(21, 255, 0);
left: 30px;
top: 30px;
opacity: 50%;
}
<head></head>
<body>
<div id="container">
<div id="redbox"></div>
<div id="greenbox"></div>
</div>
</body>
The reason this is happening is because you are using percentages for your width and height. Absolute positioning is relative to the nearest parent that has position: relative If nothing qualifies for that, the parent is the <body> element.
When you set position: relative on the #container, you are changing the size of the relative parent to the red and green boxes. And since you are using percentages, the size of the red and green boxes change accordingly.
This question already has answers here:
What is the point of CSS collapsing margins?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
Does anyone have an idea / explanation why this code affects the anchestors in it's vertical position?
This effect take place at least in chrome v75 and firefox v67 on linux.
Actually I would expect:
no affect on any parent-element of this two children
the first child on top aligned
second child followed by first child, fully visible
Codepen
.abs {
position: absolute;
width: 100%;
height: 100px;
background: red;
}
.static {
margin-top: 100px;
background: blue;
height: 200px;
width: 100%;
}
<header>
<div class="abs">Absolute or fixed should have no space to the top</div>
<div class="static"></div>
</header>
like that
.abs {
position: absolute;
width: 100%;
height: 100px;
background: red;
}
.static {
position:absolute;
top: 100px;
background: blue;
height: 200px;
width: 100%;
}
<header style="position:relative;">
<div class="abs">Absolute or fixed should have no space to the top</div>
<div class="static"></div>
</header>
This question already has answers here:
How can I center an absolutely positioned element in a div?
(37 answers)
Flexbox: center horizontally and vertically
(14 answers)
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 4 years ago.
I have a div (child) that is positioned absolute within a parent container (positioned relative). I want this child div to be centered vertically and horizontally within its container both on desktop and mobile, however the child div moves positioning depending on the size of the window. How do apply consistent centered positioning across devices?
HTML
<div class="container">
<div class="child">
</div>
<div class="child-2">
</div>
</div>
CSS
.container {
width: 300px;
height: 300px;
border: solid 1px blue;
position: relative;
}
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
position: absolute;
right: 50%;
left: 50%;
top: 50%;
border-radius: 100%;
}
.child-2 {
border-bottom: solid 1px blue;
width: 300px;
height: 150px;
}
JSFiddle for example - http://jsfiddle.net/hfndkywe/8/
it is always safe to use transform to make the element center, see the following code
.child {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
left: 50%;
top: 50%;
border-radius: 100%;
transform: translate(-50%,-50%);
}
when you use left and right positioning, it is always pushing div from the sides not from the center, so in order to make exactly at center transform is the easy fix.
This question already has answers here:
z-index not working with fixed positioning
(8 answers)
Closed 5 years ago.
Why z-index property isn't working with element with position absolute, if this element has parent that has position fixed?
I make simple example for this case
HTML:
<div id='q1'>
<div id='q2'></div>
</div>
CSS:
#q1 {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
z-index: 0;
}
#q2 {
position: absolute;
top: 80%;
border: 2px solid black;
width: 100px;
height: 30px;
background-color: green;
z-index: -1;
}
It can't be done like that because z-index is relative to the elements of same stack and in your case you want the z-index of child to be lower than that of parent.
By the way if you don't make #q2 a child of #q1, it will work like charm.
Hope this help
It has nothing to do with the position property, it's because q2 is nested inside q1
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 9 years ago.
In HTML,When you use the position:absolute css property in child block the absolute value is not taken from parent tag it refer from whole browser window.
the sample code is shown below..
CSS
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
}
.child {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
If you want the arrange the child with in the parent block just add position:relative in the parent CSS
The parent block needs to be have position set to a non-static value, that is:
position: absolute, position: fixed or position: relative.
The value you need depends on the layout application.
.parent {
width: 400px;
height: 400px;
border: 1px solid green;
position:relative;/*this makes all my children s position relative to me */
}
.child {
position: absolute;/* i have an absolute position and i am relative to my parent*/
width: 200px;
height: 200px;
border: 1px solid red;
bottom: 0px;
}
Demo: http://jsfiddle.net/pGvvq/
markup:
<section class=parent>
this makes all my children s position relative to me
<article class=child>
i have an absolute position and i am relative to my parent
</article>
</section>
READ more http://css-tricks.com/absolute-positioning-inside-relative-positioning/