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.
Related
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>
This question already has answers here:
Element not moving from top
(2 answers)
Closed 6 years ago.
body {
background: #8E2800;
}
#main {
background: purple;
position: relative;
color: white;
}
#title {
background: grey;
position: absolute;
top: 50%;
left: 50%;
height: 40%;
width: 50%;
}
<div>
<div id="main">
<div id="title">
<h2>Weather Forecast</h2>
</div>
</div>
</div>
Also as working demo can be found on codepen:
http://codepen.io/manzur/pen/RomyjK?editors=1100
position: absolute positions with respect to the edges of the nearest positioned ancestor.
#main has position: relative so it is the element that #title is positioned with respect to.
#main has no content which is in normal flow (the only content is absolutely positioned) and it has a height of auto (the default). The computed height is therefore 0.
50% of 0 is 0.
You need to either position with respect to something else (e.g. the viewport by removing position: relative from #main) or give #main some height (by adding content or using the height property).
How to make the <div> inside wrapper bigger than wrapper itself without change the structure?
HTML
<div class="page row1">
<div class="home-wrapper row2">
<div class="home-slider row3"></div>
</div>
<div>
CSS
.page { width: 100%; height: 400px; border: 1px solid #000; background: #eee; }
.home-wrapper { width: 90%; height: 400px;border: 1px solid red; background: #ccc; margin: 0 auto;}
.home-slider{ width: 100%; height: 200px; border: 1px solid blue; background:#000; }
http://jsfiddle.net/46vpqmgh/1/
I want the black box is same width with the page <div> without change the structure, using only CSS.
Thanks
Add:
position: absolute to .home-slider to pull it out of the normal flow
top: 0 and left: 0 to .home-slider to position it correctly
position: relative to .page to make it's children absolute positioned elements relative to it
Percentage height and width will be calculated based on the size of .page.
Have a fiddle!
Added CSS
.page {
position: relative;
}
.home-slider {
position: absolute;
left: 0;
top: 0;
}
Read more about the CSS position property over on the MDN
Absolute positioning
Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
In our example above, the nearest positioned "ancestor" is .page
Add the following properties. Looks fair to me.
.home-slider {
/* ... */
z-index: 1;
margin-left: -5%;
position: fixed;
}
Change the following class:
.home-slider {
width: 100%;
height: 200px;
border: 1px solid blue;
background:#000;
position: absolute;/*Add position absolute*/
left: 0;/*Add left to 0*/
}
fiddle
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/
Is it possible to make multiple absolute-positioned divs overlap multiple relative-positioned divs in IE6 & IE7?
See this jsFiddle for more information: http://jsfiddle.net/btker/1/
HTML
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper">
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
CSS
.wrapper{
height: 100%;
width: 100%;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 100;
}
There are two relative <div>s (placed in identical wrappers) containing each one a absolute <div> that overlap all the relative <div>s. This works great without any problems in updated versions of Chrome, Firefox etc, the absolute <div> with z-index is always placed on top.
In IE6 and IE7 this is not working. The different between this problem and the standard "dropdown in header display its menus behind the page content" is that in those situations its often fixed by give the parent element of that specific menu other z-index etc. In this case the both absolute <div>s are put in identical <div>s.
Can this be solved so the absolute <div>s are always on top of all relative <div>s in IE6 & IE7? Conditional comments for IE can be used to make the solution cross-browser.
It is possible but only by decreasing the z-index of the second .wrapper or increasing the z-index of the first .wrapper.
On a simple level, each positioned element with a non-auto z-index creates a new stacking context, although there are other circumstances in which a new stacking context is created - see The stacking context.
The problem is one that affects IE <= 7, from quirksmode.org
In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn't work correctly.
CSS
.wrapper{
height: 100%;
width: 100%;
}
.lower {
position: relative;
z-index: -1;
}
.higher {
position: relative;
z-index: 2;
}
.relative_div {
height: 75px;
width: 200px;
border: 1px solid #000;
padding: 10px;
background: #e6e6e6;
margin: 0 0 35px 0;
position: relative;
}
.absolute_div {
height: 100px;
width: 250px;
border: 1px solid #000;
background: #c6c6c6;
padding: 10px;
position: absolute;
top: 40px;
left: 100px;
z-index: 1;
}
HTML
<div class="wrapper"> <!-- add higher class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>
<div class="wrapper"> <!-- or add lower class here -->
<div class="relative_div">Relative div.
<div class="absolute_div">This div have absolute position and is placed in a relative positioned div. This div should always be on top of all relative divs.</div>
</div>
</div>