How can I put a floated text above an absolute positioned image? The property z-index does not seem to work here.
Example: (jFiddle)
.box {
z-index: 1;
background-color: red;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px
}
.text {
float: left;
z-index: 2;
}
<div style='position:relative'>
<span class='text'>Hello</span>
<div class='box'>
</div>
</div>
Just add position: relative; to your text's CSS.
Just as a side-note you'll need to keep the z-index properties you've put too.
Or alternatively (but I wouldn't suggest it), add z-index: -1; to the box, and remove z-index from the text.
.box {
z-index: 2;
background-color: red;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
}
.text {
float: left;
z-index: 999;
color: #fff;
position: relative;
}
<div style='position:relative'>
<span class='text'>Hello</span>
<div class='box'>
</div>
</div>
Just adding Position:Relative will work out in your code:
.box{
z-index:1;
background-color:red;
position:absolute;
top:0;
left:0;
height:200px;
width:200px
}
.text{
float:left;
z-index: 2;
color: black;
position: relative;
}
Related
I need the :before element to appear under the parent element, but it does not work. Below is my CSS, and you can find a working example here.
.element {
position: absolute;
z-index: 10;
}
.element:before {
content:"";
position: absolute;
z-index: -1;
}
You can try adding a child tag in your container.
The problem is that :before inherits z-index from its parent. z-index works like layers, everything in your .element will have a z-index: 10, and can only be indexed with elements in the same 'layer'.
I hope I'm clear enough.
.element{
position: relative;
}
.element .child {
position: relative;
top: 0; left: 0;
width: 200px;
height: 200px;
background: red;
z-index:10;
}
.element:before{
content:"";
position: absolute;
width: 20px;
height: 20px;
background: green;
z-index:-1;
}
<div class="element">
<div class="child"></div>
</div>
Instead of using the :before i've created two seperate div's. see the updated jsfiddle Or the code snippet down below:
.element-1{
position: absolute;
width: 200px;
height: 200px;
background: red;
z-index:10;
}
.element-2{
content:"";
position: absolute;
width: 20px;
height: 20px;
background: green;
z-index:-1;
}
<div class="element-1">
</div>
<div class="element-2">
</div>
Hope it helps!
Your task is unachievable (i guess) if parent object has:
position: absolute;
removing it solves the problem (if removing it is allowed).
I'm trying to make a slider. My divs are #foo, #bar and #text.
#foo is the container div
#bar is a colored div inside #foo. It fills it with variable percentage width.
#text is a transparent div inside #foo (except for the text). It should be above #bar.
Something like this (image)
How can I achieve this with CSS? My code currently looks something like this:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
}
#bar {
background: green;
width: 50px;
float: left;
height: 20px;
z-index: 2;
}
#text {
z-index: 3;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
Something like this?
#slider {
width: 200px;
height: 30px;
background-color: black;
position: relative;
}
#percentage {
color: white;
line-height: 30px;
margin-left: 10px;
position: absolute;
}
#bar {
width: 75%;
height: 30px;
background-color: red;
position: absolute;
}
<div id="slider">
<div id="bar">
</div>
<div id="percentage">75%</div>
</div>
Simple make the outer box positioned relative so child elements are relative to the outer box, then position both those elements absolute inside their parent. Give the two inner boxes a position of top left. Now your z-index will work, check out this modified snippet:
#foo {
background: red;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
}
/* Combined these since they share a lot in common */
#bar, #text {
/* Made width and height 100% as they are relative to the parent size now */
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 0;
}
#bar {
background: green;
width: 50px;
}
#text {
z-index: 1;
}
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
The below will fill the loading bar on hover - you may wish to use jQuery for a wider range of event handlers:
<div id="foo">
<div id="bar"></div>
<div id="text">
Some text.
</div>
</div>
#foo {
background: green;
width: 100px;
height: 20px;
z-index: 1;
position: relative;
overflow: hidden;
}
#bar {
background: red;
width: 100%;
position: absolute;
left: 0;
height: 100%;
z-index: 2;
transition: left 0.5s ease-in-out;
}
#text {
z-index: 3;
position: absolute;
height: 100%;
width: 100%;
}
/* REMOVE BELOW AND EDIT #bar LEFT: VALUE FOR STATIC LOADING BAR */
#foo:hover #bar{
left: 100%;
}
A similar question has been asked many times (how to place text over an image) but every solution says make a relative positioned container and place image and text inside.
But what if the container needs to be absolute??
I want the image to be absolute in order to span the full width of the page, without being limited by the wrapper's width: Wrapper has set width, the image container should ignore this and be full screen, and the text should float above the image.
Here is a fiddle in which the image isn't ignoring the wrapper's width
.splash_image {
position: relative;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
position: absolute;
}
.splash_title {
color: red;
position: absolute;
}
.wrapper {
width: 50%;
}
<div class="wrapper">
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image">
<div class="splash_title">Test title to go here on image</div>
</div>
</div>
You set relative positioning on the image container, so even though you've positioned the image absolutely, it's being positioned absolutely within a relative positioned container. The container should be positioned absolutely if I am understanding what you're looking for:
.splash_image{
position:absolute;
left:0;
top:2%;
height:600px;
width:100%;
overflow: hidden;
z-index: 1;
}
.splash_image img{
width:100%;
}
.splash_title{
color:red;
z-index: 88;
position:absolute;
top:0;
left:0;
}
Updated Fiddle
There are multiple ways to accomplish this. Here is a simple answer:
.splash_image {
position: absolute;
left: 0;
top: 2%;
height: 600px;
overflow: hidden;
z-index: 1;
}
.splash_image img {
width: 100%;
}
.splash_title {
color: red;
position: absolute;
z-index: 2;
}
.wrapper {
width: 50%;
}
<div class="splash_image">
<img src="http://fc07.deviantart.net/fs34/f/2008/290/6/4/Large_Tree_Stock_by_HauntingVisionsStock.jpg" alt="test image" />
</div>
<div class="wrapper">
<div class="splash_title">Test title to go here on image</div>
</div>
https://jsfiddle.net/jonnysynthetic/2vqgab7t/
However, you could also try setting the image as a background to the parent element as well. I wasn't sure of the scope of what this is in or a part of, so I wanted to give you the simple answer first.
.splash_image{
left: 0;
top: 2%;
overflow: hidden;
width: 100%;
z-index: 1;
height: 100%;
}
.splash_image img{
width:100%;
position:absolute;
}
.splash_title{
color: red;
z-index: 88;
position: absolute;
top: 50%;
left: 50px;
right: 0;
bottom: 0;
margin: auto;
}
.wrapper{
width: 50%;
height: 150px;
position: relative;
}
https://jsfiddle.net/2tpbx12x/5/
try this:
.splash_image img{
width:100%;
position:fixed;
}
I'm trying to create some static content using a div with position: fixed and then allow a solid div with a background-color to scroll over it and hide the static text below.
HTML:
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
CSS:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
But the yellow div just shows the text through from the fixed background.
Why is this?
By setting z-index: -1; in .static-background i get the desired behaviour, except that the link is no longer clickable and the text is not selectable.
How do I make the background of .overlay hide the fixed elements behind while still allowing interaction (until hidden)?
Fiddle here.
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
When you give the element .static-background a negative z-index, it is being placed behind the parent .container element, which is why the element is unclickable.
To work arond this, you need to give the parent element, .container, a z-index to establish a stacking context between the elements.
In this case, you can simply give it a z-index of 1.
Updated Example
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Added */
}
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.static-background {
position: fixed;
z-index: -1;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Some text</p>
<p>this should be clickable</p>
</div>
<div class="overlay"></div>
</div>
As an alternative, you could also just give the element .overlay a z-index of 1, and remove the z-indexs from the other elements. (example)
You might want to add some z-index to your elements:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index: 99;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
position: relative;
z-index: 100;
}
Change your css to this...
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index:4;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
z-index:5;
position:relative;
}
Working JSFiddle http://jsfiddle.net/DivakarDass/mcdbopj6/3/
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>