Got an absolute div inside relative, and i need that absolute div to dive out on container hover.
Basic html would be
<div class="container">
<div class="animated t50">See more</div>
</div>
css
.container {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.animated {
position: absolute;
bottom: -5%;
}
.t50 {
transition :0.5s;
/*and further on with all the prefixes*/
}
.container:hover > .animated {
bottom: 5%;
}
so, apparently there is something i don't know...
You must set overflow: visible on the parent container.
Here's an example on JS Bin: http://jsbin.com/luhekatale/1/
Related
I'm currently trying to make it so that whenever I hover over the div with class hover-me, the div with class popup will change from being hidden to being shown. This works fine, however, the div with class popup is absolutely positioned outisde its parent div with class element but because the div with class elements-container has overflow-y: auto and overflow-x: hidden, I can't see it.
I'm wondering if there's any trick I can use to fix this problem without actually removing the overflow-y and overflow-x from elements-container, because that would break some other stuff.
So I have the following structure right now:
<div class="elements-container">
<div class="element">
<div class="hover-me">Hover Me</div>
<div class="popup">Hello</div>
</div>
<div class="element">
<div class="hover-me">Hover Me</div>
<div class="popup">Hello</div>
</div>
</div>
And the following CSS:
.elements-container {
overflow-y: auto;
overflow-x: hidden;
}
.hover-me {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
z-index: 99999;
}
.hover-me:hover > .popup {
display: block;
}
.popup {
position: absolute;
background: #242528FF;
border-radius: 3px;
width: 200px;
left: -200px;
top: 0;
color: white;
display: none;
}
I am trying to create an overlay with the following html and css
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 50%;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
opacity: 1;
background-color: blue;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.95);
color: white;
z-index: 1;
}
.div1 {
animation: 750ms 1 forwards ani;
}
#keyframes ani {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<h2>
position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">
This div element has position: relative;
<div class="div1">
This is a div
<div class="overlay">
This div element has position: fixed;
</div>
</div>
<div class="absolute">
This div element has position: absolute;
</div>
</div>
I am trying to create an overlay which is supposed to cover the entire area. However, the problem is, when I add animation it brings the absolute element to the front despite the fact that the animation has not been applied to it
move your fixed element to the bottom, something like this
<div class="relative">
This div element has position: relative;
<div class="div1">
This is a div
</div>
<div class="absolute">
This div element has position: absolute;
</div>
</div>
<div class="overlay">
This div element has position: fixed;
</div>
Since my last answer isn't the best practice, try this one.
So add these style to the div with class div1:
.div1 {
animation: 750ms 1 forwards ani;
position: relative;
z-index: 2;
}
z-index didn't work because the positioned absolute element is on a different level than the fixed element, you need to define the z-index of the same level of element (in this case div1 and absolute). z-index also needs to have position relative attribute for it to work..
(To everyone looking for an answer) I found out the problem with this code. When we apply opacity animation with values less than 1 it creates another stacking context for that particular element and its children and it was stacking the overlay with respect to that stacking context. I solved it by removing animation-fill-mode to none since it won't affect any CSS afterwards.
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'));
I currently have a couple of slideshows going that require me to have the container to be position: relative; and its child elements (img's) must be
position: absolute;
Like So:
HTML
<div class="frontimg">
<div><img src="img/jackson.jpg"></div>
<div><img src="img/custom.jpg"></div>
</div>
CSS
.frontimg {
width: 100%;
text-align: center;
position: relative;
}
.frontimg img {
position: absolute;
width: 50%;
}
And then a small js script to make them fade in and out.
I am having trouble positioning another div below it. The div below it just seems to be hidden under it.
That's because the children of ".frontimg" are not the images, but the div's that surround them.
try this:
.frontimg div {
position: absolute;
width: 50%;
}
If the images have a common height, you can simply give the .frontimg div either a set height, or bottom padding etc. to push the following elements down past the images. E.g.
.frontimg {
width: 100%;
text-align: center;
position: relative;
padding-bottom: 110px;
}
.frontimg img {
position: absolute;
width: 50%;
}
.next {border: 5px solid #30353b; background: #e7e7e7; min-height: 100px;}
<div class="frontimg">
<div><img src="https://unsplash.it/800/100"></div>
<div><img src="https://source.unsplash.com/random/800x100"></div>
</div>
<div class="next">
<p>The following div</p>
</div>
That div you want to stack under the slideshow is a static element, whilst the other elements are not (display:relative,absolute, fixed are out of the normal flow of static elements. Therefore you must assign that div a position of absolute, fixed, or relative so that it can interact with the other elements properly.
I added a demo that shows a div in two positions:
click the div to toggle it's position from static to absolute.
SNIPPET
var div = document.querySelector('.div');
div.addEventListener('click', function(e) {
if (div.classList.contains('static')) {
div.classList.remove('static');
div.classList.add('absolute');
} else {
div.classList.add('static');
div.classList.remove('absolute');
}
}, false);
.frontimg {
width: 100%;
text-align: center;
position: relative;
}
.frontimg img {
position: absolute;
width: 50%;
}
.div {
border: 1px solid grey;
height: 50px;
width: 50%;
pointer-events:auto;
cursor: pointer;
}
.static {
position: static;
}
.absolute {
position: absolute;
bottom: 0;
right: 0;
}
<div class="frontimg">
<div>
<img src="http://placehold.it/350x150/000/fff?text=1">
</div>
<div>
<img src="http://placehold.it/350x150/00f/fc0?text=2">
</div>
</div>
<div class="div static">DIV</div>
Based in this answer, you need javascript (Jquery in this case) for achieve this effect.
Add this Jquery code in your js file.
var biggestHeight = "0";
$(".frontimg *").each(function(){
if ($(this).height() > biggestHeight ) {
biggestHeight = $(this).height()
}
});
$(".frontimg").height(biggestHeight);
Add another div -
<div class = "someClass"> Some text </div>
Use position:absolute and assign a top property to define the position -
.someClass {
position: abolsute;
top : 40% //or whatever you like
}
You can also add a line break - <br>
I'm working with absolute positioning within a relative div. The code is as such: http://jsfiddle.net/32mq5v6L/1/
HTML
<div id="container">
<div id="featured-posts">
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/star-wars-droid.jpg" /></div>
<div class="slide"><img src="http://alien.devprose.com/starwars/wp-content/uploads/2014/12/han-solo-1140x350.jpg" /></div>
</div>
<div id="other-content">
Other Content
</div>
</div>
CSS
#container { width: 100%; margin: 0 auto; background: #eee; }
#featured-posts { position: relative; width: 100%; height: auto;}
.slide { width: 100%; height: 20px; position: absolute; top: 0; }
#other-content { }
My problem is the other-content div appears underneath #featured-posts unless I apply a set height to that container, which I can't do since the goal is to make all of this responsive.
Where am I going wrong?
If you plan to have #other-content after positioned container, you will have to create new stacking context in order to move it above. One way to do it since it's not positioned is to set very little opacity:
#other-content {
z-index: 10;
opacity: .99;
}
Demo: http://jsfiddle.net/32mq5v6L/1/