My HTML:
<div id="why">
<div class="gallery clearfix">
<img src="images/why-bg.png" class="background-why">
<div class="gallery-inner">
...
</div>
<div class="gallery-inner">
...
</div>
<div class="gallery-inner">
...
</div>
</div>
</div>
MY CSS:
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
}
I want the .background-why to come over the .gallery. But it stay under the .gallery with my code. I think this image will help you to understand what I am expecting
Use the z-index property for your .background-why class.
Your css should look like this:
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index: 1;
}
Z-index is your answer. Set the z-index of the top element higher than your background ones
#why{
height: 100%;
}
#why .gallery{
height: 100%;
width: 100%;
position: relative;
z-index:1;
}
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index:2;
}
Use z-index:
#why .background-why{
position: absolute;
top: 0;
left: 0;
float: left;
z-index:1
}
Depending on your needs:
1) If you wish that .background-why to be permanently over the .gallery-inner (that whole area is .gallery-inner) - jsfiddle.net/bw6ecbuy/1/
2) If you want the .background-why to come over the .gallery-inner on hover than: jsfiddle.net/a8yszLsf/2/
Leave a comment if I got this wrong.
Related
I am attempting to use the overflow: visible; property in order to show a child element passing the parent element. My attempt is failing and the child element (the image) is getting cut off at the top of the parent element.
Does anyone see what I am doing wrong?
#blue {
height: 150px;
width: 100%;
background: blue;
}
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
bottom: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="blue">
</section>
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
If you use top: 0;instead of bottom: 0; it works, but not sure if that brokes your design.
#redBanner {
width: 100%;
height: 150px;
background: #b22525;
position: relative;
overflow: visible;
}
#redBannerImg {
position: absolute;
top: 0;
right: 10%;
width: 40%;
height: auto;
}
<section id="redBanner">
<img src="https://png.pngtree.com/element_origin_min_pic/16/07/22/2057921811589a1.jpg" alt="" id="redBannerImg">
</section>
I've seen that pattern for centering an element on a website in the code of someone else:
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<img src="https://placebear.com/200/300" alt="picture-one" />
It works fine. No doubt !
But I can not imagine what the CSS-code actually does.
I've seen similar code in which positioning was used to extend an child element to the size of it's parent.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
But here it makes no sense to me.
Can someone explain me how these first shown technique work?
What the single properties do and how it finally accomplishes it's result?
I would appreciate it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
}
<div id="wrap">
<div id="child"></div>
</div>
It's because the image has its default width and height.
When you use
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
Element would get the window size and position the element inside of it.
#child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: lime;
}
#wrap {
width: 100%;
height: 800px;
position: relative;
}
<div id="wrap">
<div id="child"></div>
</div>
So, if you put position relative to #wrap, the position absolute #child will adjust to the parent.
Hope it helps! Cheers!
position: absolute allows you to set the distance of you element from the top, bottom, right and left from the edges of the whole page.
In the second example you have shown even thought the #wrap is set to a height of 800px the #child distance from each side of the page is set to be 0. So therefore it covers the whole page!
Hope this helped!
#inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100px;
width: 250px;
margin: auto;
background-color: #000; border:1px solid #fff;
}
#container {
width: 100%;
height: 800px;
}
<div id="container">
<div id="inner"></div>
</div>
I've tried for some hours and this is getting on my nerves. I'm working with bootstrap and the spin.js library. I'm trying to put a color layer over an img tag, but this simply doesn't works.
The code which I'm working on is this
The CSS code
.container-fluid {
position: relative;
padding: 0;
margin: 0;
}
.header{
position: relative;
max-height: 920px;
height: 100%;
}
.header_layer{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: darkgrey;
z-index: 100;
}
.img_header{
position: relative;
top: 0px;
left: 0px;
width: 100%;
z-index: 99;
}
The HTML code:
<div class="container-fluid">
<div class="header col-md-12">
<div class="header_layer"></div>
<img src="http://placehold.it/350x150" class="img-responsive img_header">
</div>
</div>
However, thanks a lot.
As you give position:relative, and top/left : 0 so the elements do not overlap I guess you need position:absolute
How can I insert an element between and its child and its grandson?
I have a markup like this:
<div id="main">
<div id="img-container">
<img id="img">
</div>
</div>
And the styles are:
#main {
margin-top: 300px;
position: relative;
z-index: 1;
}
#img-container {
margin-top: -150px;
position: relative;
z-index: 0;
}
#img {
display: block;
position: relative;
z-index: 2;
}
Now the order must be
img-container
main
img
How it works now:
How it is expected to work:
(Thanks to #ralph.m for images)
You can really just get that visual effect without having to reorder layers etc. You can reverse the styles on those elements to get that appearance. Or you could do something even simpler like this:
#main {
position: relative;
background: #e7e7e7;
width: 600px;
padding: 0 50px;
margin: 50px;
}
#main::after {
content: '';
width: 500px;
height: 200px;
position: absolute;
z-index: -1;
left:50%;
margin-left: -250px;
top: -50px;
background: #30353b;
}
#img-container {
position: relative;
width: 400px;
top: -20px;
margin: 0 auto;
}
<div id="main">
<div id="img-container">
<img src="https://unsplash.it/400/200">
</div>
</div>
Question isn't clear, but are you just looking for something like this? (It basically involves replacing margin-top with top on the img-container.)
#main {
margin-top: 100px;
position: relative;
z-index: 1;
background: #e7e7e7;
width: 500px;
padding: 0 40px;
}
#img-container {
top: -50px;
position: relative;
z-index: 0;
background: #30373b;
width: 400px;
padding: 40px;
}
#img {
display: block;
position: relative;
z-index: 2;
}
<div id="main">
<div id="img-container">
<img id="img" src="https://unsplash.it/400/200">
</div>
</div>
I have div inside a div as below
<div id="locations">
<div id="h-dragbar"></div>
</div>
and css as below
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: -1;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
but hover on div with id h-dragbar is not working. You can test the code here demo.
What am I doing wrong? Thanks in advance.
In the new example jsFiddle which you've provided, you're setting a z-index of -1 to the parent div i.e. #locations which is why you're unable to perform the hover function on its child div i.e. #h-dragbar. You will need to remove the negative z-index on #locations and then it'll work fine.
Update:
I've checked your latest fiddle and instead of using a negative z-index for #locations in order to give priority to #v-dragbar, you can achieve the same by using a high z-index for #v-dragbar, for e.g. z-index: 9999, and a relatively smaller z-index for #locations, for e.g. z-index: 9998. It'll work perfectly this way. Here's a demo:
body {
width: 100%;
height: 500px;
}
#wrapper {
width: 100%;
height: 100%;
}
#explorer {
width: 13%;
min-height: 100%;
height: 100%;
position: relative;
float: left;
}
#v-dragbar {
background-color: black;
height: 100%;
float: right;
width: 2px;
cursor: col-resize;
z-index: 9999;
position: relative;
}
#h-dragbar {
background-color: black;
width: 100%;
height: 2px;
cursor: row-resize;
position: absolute;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover {
background-color: blue;
}
#v-dragbar:hover {
background-color: blue;
}
#locations {
height: 50%;
width: 100%;
position: relative;
z-index: 9998;
/*imp*/
}
<div id="wrapper">
<div id="explorer">
<div id="v-dragbar"></div>
<span style="clear: both;"></span>
<div id="locations">
<div id="h-dragbar"></div>
</div>
<div id="datapoints">
</div>
</div>
<div id="explorer">
</div>
</div>
It's not working because of the negative z-index - you're basically putting the whole thing behind the body element, rendering it non-hoverable, non-clickable, etc. We can't help further without more context, but you'll need to change your strategy a bit for this to work.
Your example works fine…
However, try:
#h-dragbar:hover{
background-color:blue !important;
}
If now it works, for you, it means that some other CSS instance has priority.
If you cannot make a positive z-index, make a z-index: 0; and check. It works:
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: 0;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
<div id="locations">
<div id="h-dragbar"></div>
</div>