Here is the code :
<div style="background-image: url(/Images/Main/BackMain.png); z-index: 2">
<div style="background-image: url(/Images/Main/BackMain1.png); z-index: 1">
</div>
</div>
The above code doesn't show BackMain.png on top of BackMain1.png which is what I'm looking for.
z-index alters the z position only of positioned elements. If an element is positioned then it will establish a new positioning context and its descendants will be positioned with respect to it.
Consequently, there is no way to set the z-index of an element so it appears in front of any of its descendants.
If you don't position the ancestor at all, and you set the descendant of position: relative; z-index: -1, then you can (in Chrome at least, I haven't tested it further) position the child behind the parent. This is likely to have unwanted side effects though.
Surely you have to change to html structure for this,
html:-
<div class="container">
<div class="object2"></div>
<div class="object1"></div>
</div>
css:-
.container {
position: relative;
}
.object1 {
background-image: url("http://farm8.staticflickr.com/7124/8075023996_f61725fac4_n.jpg");
height: 280px;
left: 0px;
position: absolute;
top: 0;
width: 320px;
z-index: -1;
}
.object2 {
background-image: url("http://farm9.staticflickr.com/8054/8110021320_ebaa03c9b0_s.jpg");
background-repeat: no-repeat;
height: 280px;
position: absolute;
width: 320px;
z-index: 20;
}
Check what i have created:- http://jsfiddle.net/hJbHR/1/
Related
So I have an issue and despite spending on research a while now I still cannot figure out what I am doing wrong.
Consider the following:
/* Main row */
.main-row {
width: 100%;
display: inline-flex;
z-index: -1;
position: relative;
}
.spacer {
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
and HTML
<div class="main-row">
<div class="main-row left-pane">
<h1 class="main-row title">Changing The Way</h1>
<p class="main-row subtitle">We understand <a>intelligent</a>telecommunication</p>
</div>
<div class="main-row right-pane">
<img src="<?php echo base_url("assets/vid/ai_brain.gif");?>" />
</div>
</div>
<div class="spacer"></div>
I am expecting to see the spacer (with some fancy graphics) to overlay the main row but this isn't happening. The position is specified, the z index is set correctly, the two divs are independent of each other. Whatever I do the graphic still is displayed below the main-row div
I think you're confusing background-position and element positioning. Background positioning changes the position of your background relative to wherever the element is on the screen. The background is still contained by the element, and otherwise does not affect the element's size or position on the screen.
Everything will overlap if you adjust the actual position of the spacer, like so:
.spacer {
top: -200px; /* This */
width: 100%;
background-color: #0a0826;
height: 250px;
background-image: url("../img/purple-wave.png");
background-position: 0px 17%;
z-index: 10;
position: relative;
}
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'));
Here is the HTML I am working with.
<div id="outer" style="min-width: 2000px; min-height: 1000px; background: #3e3e3e;">
<div id="inner" style="left: 1%; top: 45px; width: 50%; height: auto; position: absolute; z-index: 1;">
<div style="background: #efffef; position: absolute; height: 400px; right: 0px; left: 0px;"></div>
</div>
</div>
What I would like to happen is for the inner div to occupy 50% of the space given to its parent div(outer). Instead, is is getting 50% of the space available to the viewport, which means that as the browser/viewport shrinks in size, so does it.
Given that the outer div has min-width of 2000px, I would expect the inner div to be at least 1000px wide.
Specifying a non-static position, e.g., position: absolute/relative on a node means that it will be used as the reference for absolutely positioned elements within it http://jsfiddle.net/E5eEk/1/
See https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning#Positioning_contexts
We can change the positioning context — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's ancestors.
#outer {
min-width: 2000px;
min-height: 1000px;
background: #3e3e3e;
position:relative
}
#inner {
left: 1%;
top: 45px;
width: 50%;
height: auto;
position: absolute;
z-index: 1;
}
#inner-inner {
background: #efffef;
position: absolute;
height: 400px;
right: 0px;
left: 0px;
}
<div id="outer">
<div id="inner">
<div id="inner-inner"></div>
</div>
</div>
Use position: relative on the parent element.
Also note that had you not added any position attributes to any of the divs you wouldn't have seen this behavior. Juan explains further.
it's a known 'bug' that elements with fixed position loose their position if the container is translated. For example, if i've got a structure like this:
<div class="container">
<div class="fixed"></div>
</div>
and, say, the container is scrolled, when the conteiner gets transformed (say, translate(x,y), rotate(), or so..), then the fixed element behaves like it was positioned relative and it scrolls with the container. I can see it on the latest firefox, for example.
How can one fix this kind of problem? Is there any way?
This behaviour is not a bug. It's actually the specs recommended behaviour.
(See this post by Eric Meyer, or this question here on SO which accepted solution only provides a link to the same meyer's post)
For those who don't know this issue, and because you didn't provide a snippet into your question, here's one.
document.addEventListener('click', function() {
document.getElementById('container').classList.toggle('transformed')
}, false);
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 5em);
}
<div id="bg">
<div id="container" class="transformed">
.<br>.<br>.<br>.<br>.<br>.<br>.
this is a scrollable paragraph
<br>.<br>the "fixed" content does scroll with the paragraph
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
you can click to toggle the transformation On/Off
<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
However, I did find something that may help others facing the same issue.
It's not really a solution, since the "fixed" element will be only inside the container, (except for IE browsers where it will really be fixed to the document). But in my case, it's actually what I wanted and maybe it'll be fine for others too.
If you add a wrapper, set its height:100%; width:100%; and overflow:auto, then your "fixed" content won't scroll with the container.
Actually it's not you container which scrolls anymore, but the wrapper. So you might want to set the container's overflow:visible or hidden to avoid unwanted scrolling of the not so well "fixed" element.
Also, note that you need your wrapper be a block or inline-block element.
#bg {
border: 1px solid #AFA;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
border: 1px solid #FAF;
height: 50%;
width: 75%;
position: relative;
margin: 0 auto;
overflow: visible;
}
#wrapper {
height: 100%;
width: 100%;
overflow: auto;
}
#content {
background: rgba(125, 175, 0, .7);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.transformed {
transform: translate(0, 50%);
}
<div id="bg">
<div id="container" class="transformed">
<div id="wrapper">
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
<span id="content">relatively fixed content</span>
</div>
</div>
</div>
I am not familiar with this bug, but when you use positioned: fixed; the element is positioned relative to the browser window, so it doesn't really make any sense to put it inside a container.
This markup would be my recommendation:
<div class="fixed"></div>
<div class="container"></div>
Once you use position: fixed; on any element it is positioned relative to the view-port. Directly from page in MDN about position property.
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled.
So what you are experiencing is a what it is actually supposed to work like and not a 'bug'.
Now if what you want is something that is positioned with relation to the .container div and translate with it than you will have to use absolute positioning here. Take a look at this fiddle. The important CSS is-
.container {
width: 200px;
height: 100px;
position: relative;
}
.absolute {
position: absolute;
width: 20px;
height: 10px;
top: 50px;
left: 50px;
}
Notice that with positioning the inner div as absolute I have also positioned the outer div as relative as the inner div takes its position in reference to the closest parent div positioned as anything different from static.