This question already has answers here:
CSS overflow hidden with absolute position
(3 answers)
Closed 8 years ago.
Why my div positioned as absolute didn't get out of the flow and get hidden by a mom div her overflow set to hidden ?
How can i show my div positioned to absolute ?
here's a FIDDLE
HTML :
<div class="div1">
<div class="div2">
<div class="div3">ccccc</div>
</div>
</div>
CSS :
.div1 {
overflow: hidden;
width: 60px;
height: 20px;
background-color: antiquewhite;
}
.div2 {
position: relative;
}
.div3 {
position: absolute;
right: -10px;
}
Your problem is with your "div3" class.
Try this:
.div3 {
position: absolute;
}
That should fit nicely.
Now if you want it to be centered, then just go:
.div3 {
position: absolute;
width: 100%;
text-align: center;
}
EDIT:
If you insist, then the easiest will be to have a counter on the same element. Try this then:
.div3 {
position: absolute;
right: -10px;
padding-right: 10px;
}
Hope this helps.
Related
This question already has answers here:
Why does position:relative; appear to change the z-index?
(2 answers)
How does z-index work with its default values?
(1 answer)
All About.... Z-Index?
(4 answers)
How does the z-index property really work?
(5 answers)
Closed 1 year ago.
I try to learn how to use pseudo elements in CSS and I am facing a problem. I try to create a container that contains some text and a pseudo element.
But I wan't the pseudo element to be behind the elements text but before the background color. I don't know how to achieve this.
I want the pseudo element to be part of and before the background color. But to be behind the containers actual content.
Here is a short snippet of the exact problem I am facing:
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
<div class="container">
<h1>This is a title</h1>
</div>
Just set z-index to childs of container.
.container {
height: 10rem;
background-color: blue;
color: white;
}
.container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3rem;
height: 3rem;
background-color: red;
}
.container>* {
position: relative;
z-index: 2;
}
<div class="container">
<h1>This is a title</h1>
</div>
there is possible to display something befere? when overflow is hidden? or maybe can we specifiy with side will be hidden from overflow?
for ex:
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 {
overflow: hidden;
}
<div id='ex1' class='before'>Wisible text with css before, more text, more and more... but </div>
<div id='ex2' class='before'>hidden overflow text with css before... more and more text</div>
If you declare an element to have overflow: hidden it will apply to all content, including before and after elements. There is no way to disable the hidden value for a specific child.
Consider wrapping your content in a div with a maximum width and height of its parent, and setting oveflow: hidden on that div instead. The root element's before and after pseudoelements will exist outside the wrapper so won't be affected.
.before {
width: 200px;
margin: 30px;
background-color: blue;
height: 30px;
position: relative;
}
.before:before {
content: "221";
color: blue;
font-size: 15px;
display: inline-block;
position: absolute;
left: -20px;
top: -20px;
}
#ex2 > .wrapper {
overflow: hidden;
max-width: 100%;
max-height: 100%;
}
<div id='ex1' class='before'><div class="wrapper">Visible text with css before, more text, more and more... but </div></div>
<div id='ex2' class='before'><div class="wrapper">Hidden overflow text with css before... more and more text</div></div>
I'm trying to achieve a past and future picture line in 2 divs. All pictures on left side of screen stack to infinity from right to left and all images on the right side of screen stack to infinity left to right. I have almost achieved this except I can't stop the images going to a new line.
Fiddle
HTML
<div id="parent1">
<div id="past">
<img id="topic1" src="./img/topic1.png"></img>
<img id="topic2" src="./img/topic2.png"></img>
...
</div>
<div id="future">
<img id="topic1a" src="./img/topic1a.png"></img>
<img id="topic2b" src="./img/topic2b.png"></img>
...
</div>
</div>
CSS
#parent {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%
}
#future {
position: absolute;
height: 100%;
width:50%;
left:50%;
top:0%
}
#future img {
float: left;
height: auto;
width: auto;
margin: 1%;
max-height: 100%;
white-space: nowrap;
}
#past {
position: absolute;
height: 100%;
width:50%;
left:0%;
top:0%
}
#past img {
float: right;
height: auto;
width: auto;
margin: 1%;
max-height: 100%;
white-space: nowrap;
}
Any help would be great. Currently they're stacking vertically to infinity :(
Based on your description in the comments, you would like the following structure:
3 - 2 - [ 1 | 1 ] - 2 - 3
Where the elements numbered 1 are visible and 2 & 3 are off the screen but still inline.
You could achieve this by having the elements in the div on the right - #present - using text direction left to right (default in western browsers, but worth specifying if your layout depends on it) and the div on the left - #future - using the text direction right to left. You can then hide the overflowing elements using overflow: hidden within the parent element:
CSS
img {
height: 100%;
width: 100%;
}
#past, #future {
position: absolute;
height: 100%;
width:50%;
left:0%;
top:0%;
overflow: hidden;
white-space: nowrap;
}
#past {
left:50%;
text-align: left;
direction: ltr;
}
#future {
text-align: right;
direction: rtl;
}
HTML
<div id="past">
<img id="topic1" src="/path/to/image1.jpg"></img>
<img id="topic2" src="/path/to/image2.jpg"></img>
<img id="topic3" src="/path/to/image3.jpg"></img>
</div>
<div id="future">
<img id="topic1a" src="/path/to/image4.jpg"></img>
<img id="topic2b" src="/path/to/image5.jpg"></img>
</div>
Working example: http://jsfiddle.net/vymvN/
Right. The current answer I've got is to float: right, and make the #past div dynamically change width based on how many images are in it. If there is a of a non JavaScript way I'd be chuffed to learn about it :D
CSS
#past {
right: 50%;
width: 300%;
}
#past img {
float: right;
}
JQuery
$('#past').css('width', ( $('#past > img').size() ) * 100 + "%");
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
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'));