This question already has answers here:
Why does z-index not work?
(10 answers)
Closed 2 years ago.
I was wondering how i can achieve the following:
I have two divs. One is positioned absolutely, while the other is a simple block element. I need the block element to actually overlap the absolutely positioned container.
Here's a picture of what i need to do:
The red box is positioned absolutely, the blue box is a normal block element (inside a flexbox, but i don't think that changes anything, correct me if im wrong)
I've tried achieving this with z-index, but it doesn't seem to work.
Thanks
Edit: Here's a fiddle to show more or less my code.
https://jsfiddle.net/xzp284vn/
<div class="container">
<div class="block">
</div>
<div class="absolute">
</div>
</div>
.container {
display: flex;
justify-content: flex-end;
position: relative;
width: 400px;
height: 300px;
}
.block {
border: 1px solid blue;
width: 40px;
height: 300px;
}
.absolute {
border: 1px solid red;
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 40px;
background: yellow;
}
.red{
height:100px;
border: 1px solid red;
}
.blue{
border: 1px solid blue;
width: 150px;
position: absolute;
right:30px;
top:9px;
height:300px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="red">
</div>
<div class="blue">
</div>
</body>
</html>
This is what you are looking for..
Related
Hy guys.
I have a situation of overlay div inside another div.
Why the main div not fit the height size when i using position relative in a inner div to create a overlay.
See the picture
I cannot use position: absolute because i need the scroll working inside the main div.
See the code:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: relative; top: -52px; left: 0px; z-index: 1;
width: 350px; height: 50px; border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I can use another css settings but i need to sinc the scroll of the inner divs.
If I understand your question correctly, this is what you need:
div.main
{
width: 300px; height: auto;
border: solid 1px black; overflow: auto;
position: relative;
}
div.box1
{
width: 350px; height: 50px; border: solid 1px red;
}
div.box2
{
position: absolute;
top: 0;
left: 0px;
z-index: 1;
width: 350px;
height: 100%;
background: rgba(0,0,0,0.5);
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2"></div>
</div>
</body>
</html>
position: relative still keeps the original space free for its element - it only moves the element away from its original position by the top/bottom/left/right values. But the free space is still where it is without those settings. A wrapping container with aut height will act as if the relatively positioned element still were at its original position, causing what you brought up in your question.
So to force a solution as you seem to want it, you'll have to use a fixed height and overflow-y: hidden on your container element.
div.main {
width: 300px;
height: 52px;
border: solid 1px black;
overflow-y: hidden;
}
div.box1 {
width: 350px;
height: 50px;
border: solid 1px red;
}
div.box2 {
position: relative;
top: -52px;
z-index: 1;
width: 350px;
height: 50px;
border: solid 1px green;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<div class="box1">box 1</div>
<div class="box2">box 2 - overlay</div>
</div>
</body>
</html>
I'm trying to overlay an entire page except for one div with a transparent overlay. The problem is that the div I want on top is a child of a fixed div. How do I make it on top, but leave its parent under the overlay?
In the below code, the element I want on top of the overlay is .holder. Here's a JS Fiddle.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>z-index tests</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="root">
Root
<div class="header">
Header
<div class="holder">
Holder
</div>
</div>
<div class="content">
content
<div class="box"></div>
</div>
</div>
<div class="overlay"></div>
</body>
</html>
CSS:
.box {
height: 100px;
width: 100px;
border: 1px solid #000;
}
.root {
display: block;
background-color: grey;
}
.header {
background-color: red;
position: fixed;
top: 0px;
width: 1600px;
}
.holder {
background-color: green;
height: 60px;
width: 1600px;
z-index: 1002;
position: absolute;
}
.content {
background-color: blue;
}
.overlay {
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
background-color: rgb(50,50,50);
opacity:0.8;
z-index:10;
}
You cannot. That's how z-index and stacking layers work. Until .holder is descendant of .header which creates it's own stacking context through position: fixed, the only way to push .holder above the overlay is to move it in DOM tree outside .header and make it a sibling or descendant of .overlay.
The second option (but I guess .header is not fixed without reason) is to change styles of .header to not create stacking context, ex. change it's position to absolute and remove z-index. In that case stacking context of .holder will be on equal level with .overlay's and you would be able to manipulate depth of those with z-index.
Look at list of CSS properties creating new stacking context.
I know I'm leaving you inconsolable.
You could cheat and achieve the same effect by adding a massive box-shadow to the .holder:
.box {
height: 100px;
width: 100px;
border: 1px solid #000;
}
.root {
display: block;
background-color: grey;
}
.header {
background-color: red;
position: fixed;
top: 0px;
width: 1600px;
/*z-index: 1;*/
}
.holder {
background-color: green;
height: 60px;
width: 1600px;
z-index: 1002;
position: absolute;
}
.content {
background-color: blue;
}
.highlight {
box-shadow:0 0 0 9999999px rgba(50,50,50,0.8);
}
<div class="root">
Root
<div class="header">
Header
<div class="holder highlight">
Holder
</div>
</div>
<div class="content">
content
<div class="box"></div>
</div>
</div>
JS Fiddle
Suppose I have such a situation:
You can see a few main parts:
The panel (border red)
The image
The logo
The title
And I need this setup:
So the logo needs to get up. Usually, every time I try to make the image absolute and the logo relative, then float it to right it works, but I loose the title which also goes under the image.
And I can't make the title relative and push it from top with some value, because the image is responsive and changes it's height.
Here is the code I'm using.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.body {
width: 100%;
}
.panel {
border: 1px solid red;
background-color: blue;
margin: 50px;
}
img {
width: 100%;
}
.logo {
background-color: red;
border: 1px solid yellow;
width: 100px;
}
</style>
</head>
<body>
<div class="panel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
<div class="logo">
I'm a logo
</div>
<h1>I'm a title, hello</h1>
</div>
</body>
</html>
So I've added position:relative to the container and position:absolute; top:0; right:0 to the logo
.body {
width: 100%;
}
.panel {
border: 1px solid red;
background-color: blue;
margin: 50px;
position:relative;
}
img {
width: 100%;
height: 200px;
}
.logo {
background-color: red;
border: 1px solid yellow;
width: 100px;
position:absolute;
top:0;
right:0;
}
https://jsfiddle.net/3gusz58x/
Since the image is not moving and needs to change it's dimensions, you can just make the logo move to wherever you need it to with absolute. If you make it absolute, you need to give its container (or at least the container you would like it to be 'contained' in) position:relative; so it has somewhere to be.
Relative on panel. Absolute on logo top: 0, right: 0
ntgCleaner was 34sec faster so accept his answer.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.body {
width: 100%;
}
.panel {
position: relative;
border: 1px solid red;
background-color: blue;
margin: 50px;
}
img {
width: 100%;
height: 200px;
}
.logo {
position: absolute;
top:0;
right: 0;
background-color: red;
border: 1px solid yellow;
width: 100px;
}
</style>
</head>
<body>
<div class="panel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
<div class="logo">
I'm a logo
</div>
<h1>I'm a title, hello</h1>
</div>
</body>
</html>
you need to have the position:relative in the parent .panel and use position:absolute in .logo with top\ right set to 0
If you don't have position:relative in parent, and using position:absolute that element will go out the flow regarding the DOM
absolute
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if
any, or otherwise relative to the initial containing block. Absolutely
positioned boxes can have margins, and they do not collapse with any
other margins.
See more info about position
.body {
width: 100%;
}
.panel {
position: relative;
border: 1px solid red;
background-color: blue;
margin: 50px
}
img {
width: 100%
}
.logo {
position: absolute;
top: 0;
right: 0;
background-color: red;
border: 1px solid yellow;
width: 100px
}
<div class="panel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVxPtnNvc1ZwknRSdJZIPjrmUHitXdUU_-TT3wuIF-mWND6sXV" class="img-responsive" alt="picture nature">
<div class="logo">
I'm a logo
</div>
<h1>I'm a title, hello</h1>
</div>
I want to set rounded inside border border-radius ,(not outer border-radius) to my element without nested div's.
My idea is like this picture:
html source on
jsfiddle
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#s{
width:200px;
height: 200px;
border:8px solid green ;
border-radius:8px;
background-color: red;
margin:0 auto;
}
</style>
</head>
<body>
<div id="s" >
</div>
</body>
</html>
Is this possible in css3?
You can but it won't be usable I presume, since there is z-index: -1; once there is another background it will go behind it...
#s {
position: relative;
width:200px;
height: 200px;
border-radius:8px;
background-color: red;
margin:0 auto;
}
#s:before {
content:'';
z-index: -1;
background-color: green;
position: absolute;
top: -8px;
left: -8px;
width: 216px;
height: 216px;
}
Demo
It's possible to fake this with a couple of extra properties being outline and box-shadow.
CODEPEN DEMO
CSS
#s{
width:200px;
height: 200px;
border-radius:8px;
background-color: red;
margin:0 auto;
outline:8px solid green;
-webkit-box-shadow:0 0 0 8px green;
}
NB. The outline by itself will leave a gap where the rounded corners are. The box-shadow merely fills in the gap.
the Html is :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="wp-1-main.css">
<title></title>
</head>
<body>
<div class="wrapper">
<div class="textArea"></div>
</div>
<div class="imageLine">
</div>
</body>
</html>
and the CSS is
.wrapper{
width: 100%;
height: 400px;
position: fixed;
top: 50%;
margin-top: -200px;
border-top: solid 1px black;
border-bottom: solid 1px black;
background-color: pink;
}
.imageLine{
width: 500px;
height: 1500px;
float: right;
margin-right: 60px;
background-color: grey;
}
my goal is to make the .imageLine cover some .wrapper , and the wrapper is centered vertically , and always be in the viewport.
but those code turn out that the .wrapper covers the .imageLine . any idea to fix that?
You could use z-index
Higher z-indices will come infront of lower z-indices.