Consider an HTML:
<html>
<body>
<div id="outer"><div id="inner"></div></div>
</body>
<html>
And its CSS:
#inner {
height: 75px;
width: 75px;
background-color: red;
position: absolute;
margin-left: 20px;
}
#outer {
height: 1500px;
width: 150px;
background-color: green;
position:static;
margin-left: 100px;
}
From what I understand, the inner div should have a 20px left margin from the html element and not from the outer div as the outer div has a static position.
But it seems that the inner div always positions itself relative to outer div. What am I missing here?
If anyone can help, thanks.
EDIT:
Source: www.codecademy.com
position: absolute; removes the element from normal flow and positions itself relative to the closest positioned ancestor. If none exist, it positions itself to the initial containing block, which takes the dimensions of the viewport. Reference.
Nonetheless, for absolute elements, you should always specify the x and y dimensions (e.g., top and left), otherwise you may get some odd behavior, such as its positioning relative to a static ancestor element, which you are observing. See what happens when top and left are added:
#inner {
height: 75px;
width: 75px;
background-color: red;
position: absolute;
top: 0;
left: 0;
margin-left: 20px;
}
#outer {
height: 1500px;
width: 150px;
background-color: green;
margin-left: 100px;
}
<html>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
<html>
The element is positioned relative to its first positioned (not static) ancestor element. Thus the inner div will position itself based on the parent element containing it, in this case the "outer" div.
Related
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
I have the following html and css. If I change the position attribute from absolute to relative, the div.raw seems to flow within the html layout and the background image doesn't cover up everything. If I do not, then it does. Why is this?
HTML:
<h1 class="push">Hello World</h1>
<div class="container">
Some text
<div class="raw"></div>
</div>
CSS:
.push {
margin-bottom: 50px;
margin-top: 50px;
}
.container {
margin-top: 50px;
width: 500px;
height: 500px;
margin-bottom: 50px;
}
.raw {
border: 1px solid black;
position: absolute;
top: 0;
left: 0;
background-size: auto;
background-image: url("http://st-im.kinopoisk.ru/im/wallpaper/2/3/0/kinopoisk.ru-True-Detective-2300505--w--1280.jpg");
//background-repeat: no-repeat;
overflow: hidden;
width: 50%;
height: 100%;}
Absolute positioned elements position fixed to their ancestor which need to have a positioning. in your case the ancestor 'container' has no position so div.raw positions itself like fixed to the viewport. in fact if you set raw's position to fixed you see that it is the same as absolute. however once you set a position to container (relative for instance) that absolute and fixed makes difference.
same result here with absolute
http://jsfiddle.net/btevfik/0ugp2p2w/2/
once you put this
.container {
position:relative;
}
notice the result is different
http://jsfiddle.net/btevfik/0ugp2p2w/
http://jsfiddle.net/btevfik/0ugp2p2w/1/
http://jsfiddle.net/btevfik/0ugp2p2w/3/
Because the absolute positioned element's relative dimensions are related to whole document, relative positioned element's relative dimensions are related to its parent element.
I have two images inside a div. I'd like to position these images using percent relatively to the parent div.
Here's a fiddle to understand: http://jsfiddle.net/b9ce626s/
I tried to set position: absolute; on the image but it uses window width.
I need the image on the very right be positioned at 95% of the red div, and not the window. I also don't want the left image impacts the positionning of the right one.
Add position: relative on #main so the position of the images are both based on that element (and not on the root element).
Example: http://jsfiddle.net/b9ce626s/1/
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
As a side note, if you assign a width with a percentage value to the images, it will be now based on the parent element width.
Try this..
Html
<div id="main">
<img id="card1" src="http://dynamic-projets.fr/wp-content/uploads/2012/08/attach_image.png" alt="KH" />
<img id="card2" src="http://www.rotaryd1650.org/images/main/IconesCollectionPro/128x128/image_gimp.png" alt="9H" />
</div>
Css
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
img {
position: absolute;
width: 5%;
}
#card1 {
left:5%;
}
#card2 {
right: 5%;
}
Fiddle Sample
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position: relative;
}
Give main position: relative; like so:
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
JSFiddle Demo
Here is my CSS so far. It seems like the parent div's left-padding is fine (i.e. not covered by a child div), but its right padding is covered by a child div. Any thoughts?
.div_parent {
position: absolute;
height: 720px;
width: 600px;
top: 30px;
background-color: blue;
padding-left: 10px;
padding-right: 10px;
}
.div_child1 {
position: absolute;
height: inherit;
width: 15%;
background-color: tan;
}
.div_child2 {
position: absolute;
height: inherit;
width: 85%;
left: 15%;
background-color: green;
}
Here is my html too:
<html>
<head>
<link rel='stylesheet' type='text/css' href='calendar.css' >
<script src='calendar.js'></script>
</head>
<body>
<div class = 'div_parent'>
<div class = 'div_child1'>
<h1>test</h1>
<p>test2</p>
<p>test3</p>
</div>
<div class = 'div_child2'>
</div>
</div>
</body>
</html>
Well, the problem is that you haven't given the 'left' of first child and is auto by default and for second child you have given 15%. Also when calculating width of children you have to account for the parent's padding which you haven't. If you add up the total width of children, it is equal to the width of parent i.e. 620 so by calculation, there isn't enough space in parent div for both of them to stack side by side. One better solution to the problem is to use left floating block divs or better use calc() to account for the padding.
.child-1{
width:calc(15% - 10px);
}
.child-2{
width:calc(85% - 10px);
}
Fiddle
Use float: left; on both divs and take away the left: 15%; and the position: absolute;
I'm trying to have a set of parents with float left applied to them, but also with relative position, and inside each of them I have a div with position absolute like this:
<div class="wrapper">
<div class="pa">
<div id="apDiv1"><img src="images_1/logo-u16785.png" width="194" height="190"></div>
</div>
<div class="pa">
<div id="apDiv4"><img src="images_1/zilogo-u16782.png" width="194" height="190"></div>
</div>
</div>
and the css
.wrapper {
width:1300px;
position: relative;
}
.pa {
float:left;
width:650px;
position: relative;
}
#apDiv1 {
position: absolute;
width: 650px;
height: 190px;
z-index: 4;
left: 39px;
top: 10px;
}
#apDiv4 {
position: absolute;
width: 650px;
height: 190px;
z-index: 4;
left: 39px;
top: 10px;
}
now my problem, if u see, the 2 selectors has the same top and left, but because they are in 2 different, parent which are floated left and with position relative I thought the selectors should be positioned relative to their parent, but they are on top of each other, why??
thanks!!!
I'm not sure if this is what you're looking for but first make sure your CSS classes and DIVs have the same name.
I changed float: left; from the ".pa" div to display: inline-block;.
Check my Fiddle
It's possibly because the absolute-positioned elements aren't aware of the floated elements' boundaries, but I suspect most likely because you have styles for #apDiv1 and #apDiv2 but your actual element IDs are "apDiv1" and "apDiv4".