I've seen in previous answers that :after will go behind a its parent when the child is set to:
z-index:-1;
...and the parent is set with no z-index so the -1 defines the order.
I've done this yet it still remains above the parent in the stack (as represented by the green bar over the black square.) How can I make the green bar move to the bottom of the stack? Thanks.
http://jsbin.com/xoguzezupego/1/edit
The problem is that the two pseudo-elements are stacked as if they were child elements of .left-table, and as such, they form a stacking context that is considered to be part of the stacking order of their parent block, that is, .left-table.
You need to create a background masking element that is a child of .left-table and then
positioning it absolutely within .left-table.
When you do this, then the z-index can be used to stack the green rectangle behind the red and
black elements.
Read more about how stacking order works: http://www.w3.org/TR/CSS21/zindex.html#stacking-defs
Note: It was not clear to me what the transforms were trying to do so I left them out since
they were not relevant to the issue of the stacking order.
.left_table{
position:absolute;
top:0px;
left: 0;
width:250px;
height:175px;
}
.inner-mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
}
.left_table:before{
content:'';
position:absolute;
background-color: red;
bottom:-28px;
width:250px;
height:30px;
}
.left_table:after{
content:'';
position:absolute;
background-color: green;
right:30px;
width:15px;
height:250px;
z-index: -1;
}
<div class="left_table">
<div class="inner-mask"></div>
</div>
Related
I want to style a custom HTML slider <input type="range"> which has some colored endpoints like this:
Currently I can achieve the result seen in the picture by:
input[type="range"] {
&:before{
content:'';
position:absolute;
background-color:red;
// width, height, positioning, ...
}
&:after{
content:'';
position:absolute;
background-color:green;
...
}
Moving the handle to the beginning or end of the range it produces this:
Trying to change z-index I can only paint the colored points completely in front of the slider or behind it.
I tried also to give different z-index values to the browser-specific classes (like ::-webkit-slider-runnable-track, ::-webkit-slider-thumb, ...) but that didn't help either.
Is it possible to paint the colored points "between" the slider rail and the handle so that the point is on top of the rail but the handle covers the point?
input[type="range"]:before{
content:'';
z-index: 5;
position:absolute;
width: 10px;
height: 10px;
top: 10px;
left:-10px;
background-color:red;
}
input[type="range"]:after{
content:'';
z-index: -1;
position:absolute;
width: 10px;
height: 10px;
right: -10px;
top: 10px;
background-color:green;
}
You can't put :before and :after elements behind the parent. So maybe if you put your :before/:after elements before and after the range bar with left:-10px; and right: -10px; your problem will be solved?
I have the following problem:
I have a father-div, that's position is "relative". Inside this div I have 2 son-div's. The first son-div should be positioned relative to the father-div. But the second son-div should be positioned to the whole browser-window.
My HTML and CSS:
#father
{
position:relative;
}
#son1
{
position:absolute;
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
My problem now is, that the son2-div is also positioned relative to the father-div.
Is there any possibility to tell the son2-div, that it should inerhit the "position:relative" of the father and make left and top absolutely absolute to the whole window?
My problem is: I should change this inside a very big, complex HTML-structure, so it's not possible for me to change the HTML-structure.
First change
#son2
{
position:absolute;
left:670;
top:140;
}
to
#son2
{
position: fixed; /*change to fixed*/
left:670px; /*add px units*/
top:140px; /*add px units*/
}
Result:
#father
{
position:relative;
margin: 40px auto;
width:200px;
height: 200px;
background: red
}
#son1
{
position: absolute;
left:0;
top:0;
width:20px;
height: 20px;
background: black
}
#son2
{
position:fixed;
left:70px;
top:140px;
width:200px;
height: 200px;
background: green
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
This is unfortunately not possible without changing the HTML structure. An absolute positioned div will always position itself according to its first relative positioned parent.
What you could possibly do however, is change your #father element's width/height so you can still position your #son2 element correctly. This really depends on your layout and how far you can edit the #father element without destroying the layout. Or if possible, change your CSS so you do not need position: absolute; on #son1 (after which you can remove the position: relative; from your #parent).
You should keep your 2nd son div outside of your father div.
#father
{
background-color: blue;
width: 200px;
height: 200px;
}
#son1
{
position:relative;
left:0;
top:0;
background-color: red;
width: 50px;
height: 50px;
}
#son2
{
position:absolute;
left:670px;
top:140px;
background-color: yellow;
width: 50px;
height: 50px;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
Don't need to use position: relative; for parent div
son1 should be position: relative; for your aim.
I highly suggest use background-color and width , height to see the position of div on your page.
Also there is a simple mistake in your code:
left:670;
top:140;
You should specify the measurement unit;
left:670px;
top:140px;
Your div#son1 is already positioned to div#father by default (static position). You don't need to set any positions to them.
#father
{
/* don't set position. it's static by default */
}
#son1
{
/* don't set position. It's positioned to #father by default */
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
Also, if you want your div#son2 to be positioned to the window (user visible area), but not the root element (body), you should set div#son2 to fixed
See this video for more details about fixed position.
https://www.youtube.com/watch?v=nGN5CohGVTI
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Simple as it may look I need to create a background for a website with a container that would be semi-transparent. If I add opacity: 0.5; inside of the #content I will end up having the entire container, with all the widgets and letters going ghost. What should I do to apply transparency only to the background image? One answer would be to add transparency to the picture inside of PS but still I am curious.
#content .container {
background:url(images/menu_bar.png) left top repeat-y !important;
}
Give this a try:
#content .container {
width: 500px;
height: 100px;
background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}
The 'a' in rgba sets the opacity of the color which is 'rgb'. Of course you can set the values to your liking though. If this helps, click the checkmark ;)
Also, don't forget to set the width and height of the image.
One way around the issue is using the position attribute and the z-index attribute. The element you want to be transparent will be the one underneath and then the opaque content will be positioned on top of it.
example:
#transparent-box {
position: absolute; top: 10px; left: 10px;
z-index: 1;
}
#opaque-content {
position: absolute; top: 20px; left: 20px;
z-index: 2;
}
caveat:
When you use this method, you have to bear in mind the indentation/padding you want your content to have and then position it appropriately.
Hope that helps.
You have an interesting problem - the likes of which always have interesting solutions. I'm a big fan of CSS myself and I've tried to mimic the behaviour you need with a few CSS properties here : http://jsfiddle.net/Tax4w/
However, you can always tweak it to suit your needs if this is not exactly what you'd need.
Note: It does look the first time that the text is transparent as well but if you notice carefully it is not
HTML:
<div class="container">
<div class="inner-container">
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
</div>
</div>
CSS:
.container{
width:500px;
height:500px;
background-color:#eeeeee;
position:relative;
}
.inner-container:after{
content:"";
background: url('http://placekitten.com/500/500') left top no-repeat;
width:500px;
height:500px;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
}
.inner-container{
width:500px;
height:500px;
}
p{
font-size:20px;
}
You can do something like this:
HTML
<div class="wrapper">
<div class="transparent"></div>
<div class="content">Text goes here</div>
</div>
CSS
.wrapper {
position: relative
}
.transparent {
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
height: 100px;
width: 100px;
}
That will separate out the background opacity and the content opacity. The absolute positioning will ensure that the transparent div covers the entire parent div. Hope this helps!
I have made a fiddle for reference: http://jsfiddle.net/kLFn9/
The overflow:hidden in question is highlighted.
Basically, i'm using :hover:after to show a tool tip. but the parent element has overflow: hidden on it. How can i force the element hovered to escape the parent element?
Relevant CSS:
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden
Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.
You can use margin-top and padding-top.
padding-top will extend your parent area, but a negative margin-top will keep it in the expected position.
It will look like you're escaping the overflow, but in fact you're not.
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
background-clip: content-box; /*use this to constrain the background color within the content-box and do not paint the padding */
padding-top: 200px; /* space required to display the tooltip */
margin-top: -150px; /*200px - 50px of the original margin*/
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
<div>
<span data-name="here">hover</span>
</div>
This may introduce pointer events problems, but you can fix them using pointer-events then.
I am using simple z-index for force the element hovered to escape the parent element. Please check
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: fixed; /* Here I replaced position abosolute to fixed */
top: 10px; /* Here I replaced top -150px to 10px */
left: 250px; /* Here I replaced positionleft 0 to 250px */
z-index:99999;} /* Here I added new z-index property to 99999 */
<div>
<span data-name="here">hover</span>
</div>
There is no way using plain CSS to overflow a parent elements borders with a child, if it was set to overflow:hidden;. On possible CSS option is to use a sibling element to that one which has overflow:hidden; set and show that as popup.
I'm not sure what your trying to get at, but I recreated a tooltip framework for you to view. It's basically smoke and mirrors where I call :hover and the .class associated with it.
http://jsfiddle.net/WE8Dw/
Hope this helps.
In some cases you can escape with div{position: absolute;}
You can set child's position to fixed.
Take a look at this screenshoot first:
That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.
Here is the orange background style and the white box itself:
Orange background:
body {
margin: 0;
padding: 0;
background: url("../img/back.png") repeat-x top #fff;
text-align: left;
color: #8a5225;
}
White box:
#box {
background: url("../img/box.png") no-repeat;
width: 163px;
height: 41px;
float: right;
position: relative;
}
Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...
You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.
http://jsfiddle.net/5bsty/
<div class="one">First div</div>
<div class="two">Second div</div>
div.one {
background: #c74d12;
z-index: 3;
position: relative;
}
div.two {
position: relative;
top: -10px;
z-index: 1;
background: white;
}
use a z-index and you should be done.. give the orange background a higher z-index
I think you look like this
You take two div and parent div define position relative and child div define absolute properties and z-index is compulsory .
css
div.one {
background: #c74d12;
position: relative;
z-index:2;
}
div.two {
position: absolute;
top:11px;
background: green;
left:0;
right:0;
z-index:1;
}
Html
<div class="one">First div</div>
<div class="two">Second div</div>
Check to live demo http://jsfiddle.net/rohitazad/5bsty/3/
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex
Reffer this..:( ?