So not sure if this one is possible but from my understanding of the spec the parent of a position fixed element should be the viewport not a parent element with position relative.
That obviously all works when it comes to positioning but not with z-index.
If you take a look at this example,
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 2;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
https://codepen.io/anon/pen/mmvXaE
The fixed element goes behind the black section if you scroll down, what I need is a way to get the red element to the front without moving it out of el-one.
I have a project where some embed code needs to become fixed when you scroll past it, this is a better example of the actual code. The example above just highlights the issue in a simple way:
<div class="parent">
<div class="el-one">
<div id="my-wrapper">
<iframe class="im-fixed"></iframe>
</div>
</div>
<div class="el-two"></div>
</div>
,
I found this online talking about what I believe has caused the issue: https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements but no luck finding a workaround.
All I can think of is using JS to move the element from where an editor puts the embed code and prepending it to the body when the user scrolls past the element.
Anyone else come across this or have any ideas?
You want something like this? Increase the z-index of .el-one higher than the one you want to overlap
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 99;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
Use the following:
.el-two {
position: relative;
z-index: -1;
background-color: black;
height: 500px;
width: 100%;
}
There are several ways to solve this issue. Increasing Z-Index, cleaning up the div and etc.
I think you are sort of trying sticky header functionality. There is a new value for position CSS attribute.
position: sticky
I have cleaned up the code and removed all Z-Index. Please check the attached code snippet.
Note: Supported only in Chrome, Firefox
Not supported in IE.
.parent {
background-color: green;
position: relative;
width: 100%;
height: 5000px;
}
.header {
position: sticky;
top: 0px;
left: 0px;
height: 50px;
background-color: yellow;
}
.el-one {
background-color: blue;
color: white;
height: 100px;
width: 100%;
}
.el-two {
background-color: orange;
height: 500px;
width: 100%;
}
<div class="parent">
<div class="header">I am a header</div>
<div class="container">
<div class="el-one">
I am el-one
</div>
<div class="el-two">
I am el-two
</div>
</div>
</div>
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 1 year ago.
**Here is a simple code **
div {
border: 1px solid blue;
}
.one {
background-color: red;
width: 300px;
height: 300px;
}
.two {
background-color: orange;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
z-index: 10;
}
.twenty {
background-color: pink;
width: 300px;
height: 300px;
position: relative;
top: 100px;
left: 100px;
z-index: 500;
}
.three {
margin-top: -10px;
margin-left: 10px;
background-color: yellow;
width: 300px;
height: 300px;
}
.four {
background-color: green;
width: 300px;
height: 300px;
position: relative;
top: 80px;
left: 120px;
z-index: 11;
}
<div class="one">
<div class="two">
<div class="twenty">
Can pink be above green?
</div>
</div>
</div>
<div class="three">
<div class="four">
</div>
</div>
How to make the pink square to be above the green square? Is it possible with CSS changes only without HTML changes? Why z-index applied to the .twenty class doesn't work in this case?
Thank you.
This question is NOT a duplicate of Why can't an element with a z-index value cover its child? :
In this question we'd like the child to cover, not the parent!
All layers, except the twentieth, should not have Z order. We specify absolute an order and an order of a layer on Z.
.twenty{
position: absolute;
...
z-index: 1;
}
You should set .four with a lower z-index than .two which is the element that contains .twenty but this may not be the expected result (green also becomes under the orange).
It's not possible without changing the HTML structure, like putting .twenty inside .four, or redefining all the indexes. This is how the stacking context works.
Given this code:
<div class="A">
<div class="One"></div>
<div class="Two"></div>
</div>
<div class="B">
<div class="Three"></div>
</div>
From the top view
From the side view
Lear more about the stacking context:
CSS stacking contexts and z-index made easy
The stacking context
Yes, we can ;)... if orange gets a higher z-index than green...
.two {
...
z-index: 12;
}
It's because pink is a child of orange...
I'd like my parent div to expand the height of the content, as my content will be dynamic. However, the content must be (I think) positioned absolutely so they can overlap each other vertically.
I've concluded I'll have to use JS to find the offset from the top to the bottom of the last element in the container, then set the height to that.
I'm currently doing something like this:
var lastElement = document.getElementById('three');
var bounds = lastElement.getBoundingClientRect();
var bottomOffset = bounds.top + $("#three").height();
$("#container").height(bottomOffset);
However this is clunky within my application, and the application of the height is not instantaneous, leading to a sluggy site.
Is there a better way?
var lastElement = document.getElementById('three');
var bounds = lastElement.getBoundingClientRect();
var bottomOffset = bounds.top + $("#three").height();
$("#container").height(bottomOffset);
body,
html {
height: 100% padding: 0;
margin: 0;
}
.absolute {
display: inline-block;
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
}
#two {
top: 80px;
left: 120px
}
#three {
top: 160px;
left: 240px;
}
#container {
position: relative;
width: 100%;
;
background-color: yellow;
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="absolute" id="one"></div>
<div class="absolute" id="two"></div>
<div class="absolute" id="three"></div>
</div>
View on JSFiddle
You can accomplish your result without any JS, but instead use CSS margin around the boxes to get the same result.
For the horizontal margin you can also use percentages (by request of OP).
For the vertical margins this will give unexpected results, since the percentage will still reference the width of the container (under "Property Values"), not the height.
html,body {height:100%; padding:0; margin:0;}
.container {
background-color: yellow;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
margin-right: 2%;
background-color: blue;
}
.box.one {margin-top:0; margin-bottom:160px;}
.box.two {margin-top:80px; margin-bottom:80px;}
.box.three {margin-top:160px; margin-bottom:0;}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
pixel-margin: https://jsfiddle.net/xzq64tsh/
percent-margin: https://jsfiddle.net/xzq64tsh/3/
Perhaps taking out the getBoundingClientRect() function, using jQuery instead might speed it up and simplify it a bit.
var lastElement = $('#three');
var bottomOffset = lastElement.offset().top + lastElement.height();
$("#container").height(bottomOffset);
body,
html {
height: 100% padding: 0;
margin: 0;
}
.absolute {
display: inline-block;
position: absolute;
background-color: blue;
width: 100px;
height: 100px;
}
#two {
top: 80px;
left: 120px
}
#three {
top: 160px;
left: 240px;
}
#container {
position: relative;
width: 100%;
;
background-color: yellow;
;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="absolute" id="one"></div>
<div class="absolute" id="two"></div>
<div class="absolute" id="three"></div>
</div>
If possible you guys, can you help me with this animation?, the purpose of animation is to animate a background-color, the color is what i want to animate not the div cause the div contains another elements that I want to be always showing.
The animation i'm looking for is to spread the color[gray of containing div] from center to corners of a square.
is there a way to do it in CSS, if not how about Javascript/Jquery/Jquery-ui? maybe sass or compass? I'm fine with any of the above here's a jsfiddle and the code:
HTML:
<div class="outer_box">
<div class="inner_box_1"></div>
<div class="inner_box_2"></div>
<div class="inner_box_3"></div>
<div class="inner_box_4"></div>
</div>
a simple CSS that might help:
.outer_box{
background-color: gray;
width: 400px;
height: 400px;
}
.inner_box_1{
background-color: yellow;
width: 50px;
height: 50px;
}
.inner_box_2{
background-color: green;
width: 50px;
height: 50px;
}
.inner_box_3{
background-color: blue;
width: 50px;
height: 50px;
}
.inner_box_4{
background-color: orange;
width: 50px;
height: 50px;
}
Am assuming that you do not require a gradient.
There could be pure CSS3 solutions, but this is the easiest hack I could think of using jQuery.
See this fiddle: http://jsfiddle.net/pyf4P/2/
You give a position: relative and transparent background to your outer_box div:
.outer_box {
background-color: transparent;
width: 400px; height: 400px;
position: relative;
}
Then, have a dummy div inside that container and give it position:absolute starting from center, and with lower z-index than the container, and with your desired background color:
Markup:
<div class="outer_box">
<div class="inner_box_1"></div>
<div class="inner_box_2"></div>
<div class="inner_box_3"></div>
<div class="inner_box_4"></div>
<div id="dummy"></div> <!-- this is the dummy -->
</div>
CSS:
#dummy {
position: absolute;
top: 200px; left: 200px;
width: 1px; height: 1px;
background-color: gray;
z-index: -5;
}
That's it. Now you can animate this dummy div using jQuery:
$('#dummy').animate({
'width': '400px',
'height': '400px',
'top': '0px',
'left': '0px'
}, 500);
Hope that helps.
check this out
<div class="outer_box">
<div class="inner_box_1"></div>
<div class="inner_box_2"></div>
<div class="inner_box_3"></div>
<div class="inner_box_4"></div>
</div>
CSS
.outer_box
{
width: 400px;
height: 400px;
}
.temp-back{
z-index: -1 !important;
position: absolute;
background-color:gray;
}
JS
$(".outer_box").prepend($("<div>").addClass("temp-back"));//once
$(".temp-back").animate({margin:"0px", width:"400px", height:"400px"},4000);//OUT
$(".temp-back").animate({margin:"200px", width:"0px", height:"0px"},4000);//IN
I have a base html element and I have an overlay element that contains some buttons.
I want the mouse to be able to interact both with the base element as well as with the buttons in the overlay.
The problem is that the overlay captures the mouse events of the base element.
Is there a way that I can disable the mouse interactions for the transparent background of the overlay (like IE seems to do), while keeping the mouse interactions for the buttons inside the overlay ? Or do I need to change the structure of my code ?
Fiddle
Here's one approach.
With an overlay element:
http://jsfiddle.net/XC95u/11/
Without an overlay element:
http://jsfiddle.net/XC95u/3/
I modified the html structure and use z-index to control the positions of the divs.
HTML:
<div class="main">
<div class="base"></div>
<div class="overlay">
</div>
<div class="button left"></div>
<div class="button right"></div>
</div>
CSS：
.main {
width: 350px;
height: 150px;
position: relative;
}
.base {
background-color: #c0c0c0;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.button {
background-color: #707070;
width: 30px;
height: 30px;
position: absolute;
top: 60px;
z-index: 99;
}
.right {
right: 0;
}
Having trouble extending the left and right divs to the bottom of the page, no more no less.
Here's my work.
http://jsfiddle.net/qggFz/26/
Thanks,
Dale
Here is your js solution, sir:
//Can place js in <head> tag
$(document).ready(function(){
var remHeight = $('html').height() - $('#top').height();
$('#left').css('height', remHeight);
$('#right').css('height', remHeight);
});
css:
body, html
{
height: 100%;
}
.top {
background: red;
}
.left {
width: 25%;
background: grey;
float: left;
}
.right {
width: 25%;
background: blue;
float: left;
}
html:
<html>
<body>
<div id="top" class="top">
<div id="msg">hello</div>
</div>
<div id="left" class="left">
left
</div>
<div id="right" class="right">
right
</div>
</body>
</html>
http://jsfiddle.net/zTEhB/
Check: http://jsfiddle.net/5gqNn/
You need to specify the height of the root element.
Reference:
https://developer.mozilla.org/en/CSS/height
The is calculated with respect to the height of the
containing block. If the height of the containing block is not
specified explicitly, the value computes to auto. A percentage height
on the root element (e.g. ) is relative to the viewport.
You have to say that the body and html tags are also 100% like this:
html, body{
height:100%;
position: relative;}
.top {
background: red;
}
.left {
position: relative;
width: 25%;
height: 100%;
background: grey;
float: left;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%;
}
.right {
position: relative;
width: 25%;
height: 100%;
background: blue;
float: left;
}