I'd like an element to have relative positioning. But I don't want its child element (with position:absolute) to have relative width to the parent.
For example: http://jsfiddle.net/t2yJP/. I'd like the second body>div to have position:relative, but have its child's width maintain the same behavior.
Try adding width:inherit to the .abs class.
How about this jsFiddle.
But you should really rethink your strategy. In your fiddle, your second example only works because the parent div is not positioned and therefore, the .abs div is technically not in the parent.
Normally, child elements are inside their parents. That's what containers are for! So if you don't want the .abs div to be constrained by the red rectangle, don't put it inside the red rectangle.
I was able to achieve a similar-looking effect as follows:
<div class='abs pad'>
Content content content
</div>
<div class='rel pad red'>
</div>
.rel {
position: relative;
}
.abs {
position: absolute;
z-index: 1;
}
.pad {
padding: 2px;
margin: 2px;
}
.red {
border: 1px solid black;
width: 100px;
height: 100px;
background-color: red;
}
Related
No matter what I try, the child div is always in front of the parent. Is there a way to make the child div in back of the parent? z-index doesn't seem to work.
Notes :
I don't want to change the html
parent must have a z-index
duplicate "How to make child element upper than parent with z-index" doesn't make grammatical sense and is hard to read, and didn't really help me.
<div id='parent'>
<div id='child'>
</div>
</div>
#parent {
width:50px;
height:50px;
background:red;
position:absolute;
z-index:100;
}
#child {
width:50px;
height:50px;
background:blue;
position:absolute;
z-index:-100;
}
JSFiddle
Don't make the child div actually contained in the parent. Since the positions are absolute you can do this:
<div id='parent'>
</div>
<div id='child'>
</div>
Now if the z-index of parent is less than that of child it will appear on top.
You can't achieve that because they are part of the same stacking context. However a workaround could be set opacity: 0 to child
#parent {
width: 50px;
height: 50px;
background: red;
position: absolute;
z-index: 1;
}
#child {
width: 50px;
height: 50px;
background: blue;
position: absolute;
z-index: 2;
opacity: 0;
}
<div id='parent'>
<div id='child'></div>
</div>
AFAIK it's not possible to position a parent on top of a child. Without changing the HTML you can however use:before or :after to create a new element and position that on top of the child;
#parent:after {
background: red;
content: "ON TOP";
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
http://jsfiddle.net/j6e9qho3/12/
Edit: Or seeing as the effect of the parent being on top of the child is that the child isn't visible at all, the easiest thing to do is probably #child {display: none}. But I assume that doesn't work for you for other reasons.
Perhaps if you explained what you want to accomplish we could be of more help.
I was able to achieve what I wanted by dealing with siblings inside the parent...
<div id='parent'>
<div id='child1'>
</div>
<div id='child2'>
</div>
</div>
where parent is a transparent container with its own z-index, but the children are the actual color squares that are drawn (each with their own z-index).
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
Is it possible to get parent (position: relative) auto extend its width by its absolute child?
Here is my jsfiddle link: http://jsfiddle.net/YD2Xu/
The ideal is #container and #full-width should have the same width as #large-width.
CSS:
#container {
position: relative;
border: 1px solid green;
}
#large-width, #full-width {
display: table;
position: absolute;
}
#large-width {
white-space: no-wrap;
width: 1500px;
height: 200px;
border: 1px solid red;
}
#full-width {
top: 30px;
width: 100%;
border: 1px solid blue;
}
HTML:
<div id="container">
<div id="large-width">
this is large width
</div>
<div id="full-width">
this is full width
</div>
</div>
I need to implement this by css, don't use javascript. Does anyone know how to do it?
Thank you so much.
You can't expand parent's div according to the child's size if child's position is absolute, because elements with absolute position are removed from the flow, so their size and even being are ignored by other elements including the parent. You can set fixed size with CSS or use javascript.
Try
overflow:auto;
for parent;
I need the CSS for the child which take full-width of the body but does not break out of the flow (without using Javascript). I already tried this:
position: absolute;
left: 0;
width: 100%;
But this makes the child break out of the flow. Here is an example: http://jsfiddle.net/v5Mq4/
The height of the absolutely positioned child is variable. So margin-bottom or margin-top does not apply.
Absolute positioning removes the element from the document flow.
You can do what you intend, but you'll have to fill in your layout by creating the same-size gap. You can do this by adding margin-bottom to the previous element.
you can achieve this by mixing the usage of relative and absolute divs.
CSS Classes
.relative {
position: relative;
width: 200px;
height: 400px;
background-color: red;
}
.absolute {
position: absolute;
top: 120px;
left: -100px;
width: 200%;
height: 200px;
background-color: black;
}
and the DIVS
<div width='100%' align='center'>
<div class='relative'>
<div class='absolute'>
</div>
</div>
</div>
Plus you need another parent container (or the body) to be centering the contained elements.
Here's a jsFiddle with the solution in it.
http://jsfiddle.net/mgleeson/35vDd/
Cheers.
I have some divs at my HTML and one of them is loading image div so I want it overlap its parent div. Here is my code:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2"></div>
</div>
</div>
When I use different positions (i.e. absolute, relative etc.) child div couldn't overlap its parent. Here is my fiddle link: http://jsfiddle.net/yNFxj/4/ I don't want to see anything from parent div but I want to see that child div increased as parent's size and overlapped it.
Any ideas about how can I dot it just with pure html and css and with a generic way to implement it my any other pages?
PS: Border, width, height etc. are just for example, it can be removed.
Sajjan's the closest from what I can tell, but his has a few flaws:
Position: absolute requires its parent to have a non-static position (this is often done with position: relative, which effectively works the same way as static).
You don't need to set the height and width of the child, just the parent.
Here's my Fiddle for it to demonstrate.
#parent {
border: 5px solid gray;
position: relative;
height: 100px;
width: 100px;
margin-left: 50px;
}
#child {
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
background: red;
}
The key here is the position: relative on the parent.
I am curious, though, what exactly you're trying to achieve with this. I have a feeling that whatever it is, there's a better way.
Why doesnt this work for you? If i understand you right, you just want to mask the parent DIV with the child DIV?
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2;top:0;left:0;width:200px; height:250px;"></div>
</div>
</div>
Output on chrome:
To make it generic, get the parents position/dimension using offsetTop/Left/Height/Width methods and set the child's dimensions/position using these, im sure there are plenty of posts on SO that do this..
First problem is that absolute positioned elements refers to the first parent element with a position different from static.
This means that if no parents have fixed, relative, or absolute position, it will refer to the body, that is not what you want in this case.
Then put position: relative; to your parent div.
Second problem: with absolute position, you can stop using width and height and start using top, left, bottom and right properties;
Setting all them to 0 means extends the object to the parent boundaries.
But here you want to overlap them, then... simply, use a negative value equals to the size of the parent borders: 15px;
top: -15px;
left: -15px;
bottom: -15px;
right: -15px;
Demo: http://jsfiddle.net/yNFxj/9/
I've used dashed borders so you can see the underneath parent's borders ;)
Try this:
<div id="something1">
<div id="something2"></div>
<div id="parent" style="border: 15px solid #c1c1c1;position:relative; width:200px; height:250px;">
<div id="child" style="position: absolute; border: 15px solid #a2f2e2; width:200px; height:250px; left:-15px; top:-15px"></div>
</div>
</div>
update a fiddle for you http://jsfiddle.net/yNFxj/16/
HTML
<div id="something1">
<div id="something2"></div>
<div id="parent">
<div id="child"></div>
</div>
</div>
CSS
#parent {
width: 100px;
height: 300px;
background-color: #a0a0a0;
width:200px;
height:250px;
position: relative;
}
#child {
width: inherit;
height: inherit;
position: absolute;
background-color: #a2f2e2;
top: 0px;
left: 0px;
}
Works fine
EDIT: added with and height inherit for you & positioned properly