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).
Related
Is this possible to have element with class .myelement always on top in my HTML structure?
<div class="zindex1">
<div class="myelement">
want THIS element always be on top
</div>
</div>
<div class="zindex2">
</div>
and with for example this CSS
.zindex1 {
z-index: 1;
background-color: blue;
height: 100px;
position: relative;
}
.zindex2 {
z-index: 2;
background-color: green;
height: 300px;
position: relative;
}
.myelement {
background-color: yellow;
height: 500px;
width: 100px;
position: relative;
}
NOTE: I can't change values of my z-indexes and HTML structure.
Here is full example: https://jsfiddle.net/wLzej01f/
EDIT What if all my classes will have to have position: relative? I forget to mention about it
https://jsfiddle.net/wLzej01f/6/
The z-index CSS property won't apply to static elements:
For a positioned box (that is, one with any position other than
static), the z-index property specifies:
The stack level of the box in the current stacking context.
Whether the box establishes a local stacking context.
More about it here.
So, you need to add:
.myelement {
position: relative;
}
Updated JSFiddle.
Position: relative
.zindex1 {
z-index: 1;
background-color: blue;
height: 100px;
}
.zindex2 {
z-index: 2;
background-color: green;
height: 300px;
}
.myelement {
z-index: 3;
background-color: yellow;
height: 500px;
width: 100px;
position: relative;
}
<div class="zindex1">
<div class="myelement">
want THIS element always be on top
</div>
</div>
<div class="zindex2">
</div>
You forgot to add
position: absolute;
or
position: relative;
as you wish.
Just add position:relative to .myelement:
.myelement {
z-index: 3;
background-color: yellow;
height: 500px;
width: 100px;
position: relative;
}
DEMO
In case someone is trying to keep an element in a fixed position on the rest of the elements or does not know why one element is below another, keep in mind the sticky element.
https://www.w3schools.com/howto/howto_css_sticky_element.asp
.zindex1 {
z-index: 1;
background-color: blue;
height: 100px;
position: relative;
}
.zindex2 {
z-index: 0;
background-color: green;
height: 300px;
position: relative;
}
.myelement {
background-color: yellow;
height: 500px;
width: 100px;
position: absolute;
z-index: 2 !important;
}
**This code works**
I want my content from &:before and &:after appear outside my div.first and before and after.
I thought the best way is using the css above, but it still appears inside my div, am I using the wrong method or is it something else?
Jsfiddle: https://jsfiddle.net/1uuL3sf6/1/
HTML
<div class="first">
</div>
CSS
.first
{
width: 100%;
height: 500px;
background-color:red;
&:before
{
content:"before";
width: 100%;
height: 20px;
}
&:after
{
content:"after";
width: 100%;
height:20px;
}
}
The pseudo elements :before and after do not create content before and after their parent element. They are inserted before and after its actual content.
A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
From "Learning To Use The :before And :after Pseudo-Elements In CSS"
That's why they are always displayed inside the box of their parent.
However, as an example you can use absolute positioning to move the pseudo element out of the box:
&:before {
content:"before";
position: absolute;
top: -20px;
width: 100%;
height: 20px;
}
But you can also float them or display them as block to achieve your desired result.
Demo
Try before buy
.first {
width: 100%;
height: 500px;
background-color:red;
}
.first::before
{
content:"before";
}
.first::after
{
content:"after";
}
<div class="first">
</ br> This is your first div. </ br>
</div>
Here is a solution: https://jsfiddle.net/e8qtoxL9/
.first
{
width: 200px;
height: 200px;
margin: 0 auto;
background-color:lightgreen;
position: relative;
&:before
{
content:"before";
width: 100%;
height: 20px;
display: block;
background: lightblue;
left: -100%;
top: 0;
position: absolute;
}
&:after
{
content:"after";
width: 100%;
height:20px;
display: block;
background: lightblue;
left: 100%;
top: 0;
position: absolute;
}
}
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;
}
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 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>