I want a child of a div to be positioned to the left of its parent as if they were both sibling spans. That is, the child is actually completely outside of the parent.
The size of the child varies, but the parent has a fixed size.
I have tried using a combination of position: absolute with a negative margin, like so:
.parent {
display: block;
position: relative;
}
.child {
display: block;
position: absolute;
right: 0;
margin-right: -100%;
}
But that didn't work. I also tried many combinations of margins and positions, such as right: -100%, right: 0; margin-left: 100% and nothing works.
I tried using the same combination of right: 0 with a negative margin-right, instead using pixel values. While it does work, it's not ideal. I have multiple of those in my page (they are generated by code) and the size of the child always varies. Is there a CSS-only solution?
simply add left: 100% in your child element.
.parent {
position: relative;
background-color: teal;
width: 250px;
height: 250px;
}
.child {
background-color: blue;
position: absolute;
left: 100%;
width: 50px;
height: 50px;
}
<div class="parent">
<div class="child"></div>
</div>
Related
Is there a property that allows one element in a div to stack over another element in the same div?
I know with two divs you can use position: relative; & position: absolute; to get this working, but with two elements in the same div I'm not sure what to do.
If you would like to "stack" elements on top of each other, yes you can use the position property.
You would use z-index to alter stack order; the element with the higher z-index would be in front of an element with the lower z-index.
You can see this here, in this fiddle.
.el1 {
height: 100px;
width: 100px;
background: yellow;
position: relative;
z-index: 1;
}
.el2, .el3 {
height: 50px;
width: 50px;
position: absolute;
top: 0;
left: 0;
background: blue;
z-index: 2;
}
.el3 {
background: green;
z-index: 3;
top: 5px;
left: 5px;
}
<div class="el1">
<div class="el2">el2</div>
<div class="el3">el3</div>
</div>
Up until now, I've only had to worry about positioning a child div inside a parent, in which case I was taught to do like so:
parent {
height: 300px;
width: 100%;
position: relative;
}
child {
bottom: 1px
position: absolute
}
The child here should be positioned inside, but at the bottom of the parent. So it seems to me like the key for positioning a child inside the parent is the position:relative in the parent and the position: absolute in the child.
Now I'm trying to position a child div inside the existing child div, but since it is already set to position: absolute, I'm not sure what to do. Using the example above, how would I position the second child at the bottom of the 1st child?
If an absolutely positioned element is inside a parent with either position: relative or position: absolute, it will be positioned based on location of their parent container.
<div class="parent">
<div class="child-1">
<div class="child-2"></div>
</div>
</div>
.parent {
position: relative;
width: 100px;
height: 100px;
background-color: #bbb;
}
.child-1 {
position: absolute;
bottom: 5px;
left: 5px;
width: 75px;
height: 75px;
background-color: #fff;
}
.child-2 {
position: absolute;
bottom: 5px;
left: 5px;
width: 50px;
height: 50px;
background-color: #bbb;
}
will work just fine. Here's a link to a fiddle where you can play around with the results: http://jsfiddle.net/autoboxer/3583nazg/
I wonder whether it's totally impossible to bleed a nested div when the container is positioned relative and has overflow set to hidden?
Giving the nested div a fixed position is not an alternative in this case.
Please take a look at this example: http://jsfiddle.net/s7nhw/11/.
Anyone who knows how to do this?
I'll appreciate any feedback!
<div class="container">
<div class="nested-div"></div>
</div>
<style>
.container {
margin: 0 auto;
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position: relative;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
position: absolute;
}
</style>
I've never encountered a situation where one could override {overflow: hidden}. You'll probably need to restructure your HTML to place the nested div outside its parent in the code, then use absolute positioning and z-index to position it behind the current wrapper.
http://jsfiddle.net/s7nhw/13
.container {
width: 100px;
height: 100px;
background: green;
overflow: hidden;
position:absolute;
left: 50%;
margin-left: -50px;
}
.nested-div {
width: 200px;
height: 100px;
background: red;
z-index: -1;
margin: 0 auto;
position: absolute;
left: 50%;
margin-left: -100px;
}
<div class="nested-div"></div>
<div class="container"></div>
Here's some further discussion: override overflow:hidden with z-index
Absolute position child elements always remain under relative position parent element
How do I vertically center align the parent container to the canvas which has position:relative? The parent container has a child element with position:absolute. The child element has been positioned in the center of the parent container.
Here's a snippet:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: red;
margin: auto;
}
.item {
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="item"></div>
</div>
One solution is to wrap your .container with two wrappers; give the first one display: table; and height: 100%; width: 100%; and the second display: table-cell; and vertical-align: middle;. Also make sure your body and html have full height.
Here's a little working demo: little link.
Another method is to apply top: 50%; to your .container and margin-top: -150px; (300px / 2 = 150px). (Note that this method requires you to know the exact height of your container, so it might not be exactly what you want, but it might as well be!). A little working demo of this latter method: another little link.
I hope that helped!
I have a div element wrapping other div elements like so:
<div style="overflow:hidden">
<div id="a"></div>
<div id="b"></div>
</div>
I have other css rules that manage the dimensions of the outer div. In my actual code, I want to position the div#a exactly 10 px below the outer div. However, I want div#b to still be cut off by the outer div's overflow:hidden.
What is the best way to achieve this?
Method 1
A good way to do it is by setting the overflowing element to position:fixed (which will make it ignore the parent overflow), and then positioning it relative to the parent using this technique:
.parent {
position: relative;
.fixed-wrapper {
position: absolute;
.fixed {
position: fixed;
}
}
}
One caveat is that you cannot have any of the top,right,left,bottom properties set on the fixed element (they must all be default 'auto'). If you need to adjust the position slightly, you can do so using positive/negative margins instead.
Method 2
Another trick I recently discovered is to keep the overflow:hidden element with position:static and position the overriding element relative to a higher parent (rather than the overflow:hidden parent). Like so:
http://jsfiddle.net/kv0bLpw8/
#wrapper {
width: 400px;
height: 50px;
position: relative;
z-index: 1000;
left: 0px;
top: 0px;
}
#wrapper #insideDiv {
width: 400px;
height: 50px;
overflow: hidden;
position: absolute;
z-index: 2000;
left: 0px;
top: 0px;
}
#wrapper #a {
position: absolute;
height: 30px;
width: 100px;
bottom: -40px;
z-index: 1000;
left: 0px;
}
<div id="wrapper">
<div id="a">AAA</div>
<div id="insideDiv">
<div id="b">BBB</div>
</div>
</div>
The easiest and most convenient way is to wrap your container div inside another div and set position: relative on the external div.
.outer-container {
position: relative;
height: 50px;
}
.container {
background: gray;
overflow: hidden;
height: 50px;
}
#a,
#b {
height: 100px;
width: 100%;
}
#a {
background: green;
position: absolute;
top: 60px;
}
#b {
background: red;
font-size: 60px;
}
<div class="outer-container">
<div class="container">
<div id="a"></div>
<div id="b">Cut off</div>
</div>
</div>
as people said, the element must be presented outside the parent in order to be not cropped. But you can do this with JavaScript to achieve the similar concept without having to change your actual markup:
function breakOverflow(elm) {
var top = elm.offset().top;
var left = elm.offset().left;
elm.appendTo($('body'));
elm.css({
position: 'absolute',
left: left+'px',
top: top+'px',
bottom: 'auto',
right: 'auto',
'z-index': 10000
});
}
then pass the element you want to exclude from the cropping of its parent:
breakOverflow($('#exlude-me'));