I want an element (div) to be layered under its fixed parent (header):
header {
position: fixed;
width: 100%;
height: 100px;
background-color: #ccc;
}
header > div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
<header>
<div>
</div>
</header>
This works in Firefox but not in Chrome. To fix it you need to do this:
header {
position: fixed;
width: 100%;
height: 100px;
}
header > div {
position: relative;
width: 100%;
height: 100%;
background-color: #ccc;
}
header > div > div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
<header>
<div>
<div>
</div>
</div>
</header>
But this sucks! Who is wrong according to the specification Firefox or Chrome? And is there a better approach to get this done across browsers?
Try this,
header {
position: fixed;
width: 100%;
height: 100px;
background-color: #ccc;
overflow: hidden;
}
header > div {
height: 100%;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
overflow: hidden;
}
<header>
<div></div>
</header>
Seems like I have misunderstand your question. Anyway the answer is chrome is correct. I think the better solution for do this is, using same level two DIVs(If possible).
header {
position: fixed;
width: 100%;
overflow: hidden;
}
header .header-inner {
position: relative;
height: 100px;
width: 100%;
z-index: 1;
background-color: #ccc;
}
header .under-layer {
position: absolute;
height: 100%;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
overflow: hidden;
top: 0px;
width: 100%;
}
<header>
<div class="header-inner"></div>
<div class="under-layer"></div>
</header>
When an element has position: a new context is created, which means that the div
is relative to the window context. So your div can not be z-indexly placed regarding to the header.
You will have to use a workaround for this.
If you need to "position fix" your header, you can wrap it in a div :
<div class="test">
<header>
<div>
</div>
</header>
</div>
Apply position: fixed; to this div instead. This will create a stacking context for the div.
.test {
position: fixed;
width: 100%;
height: 100px;
}
You can then apply z-index: -1; to header > div as it will share the stacking context of div.test with its parent (header).
header {
width: 100%;
height: 100%;
background-color: #ccc;
}
header > div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
.test {
position: fixed;
width: 100%;
height: 100px;
}
header {
width: 100%;
height: 100%;
background-color: #ccc;
}
header>div {
position: absolute;
height: 100%;
width: 100px;
z-index: -1;
transform: translateY(50%);
background-color: #aaa;
}
<div class="test">
<header>
<div>
</div>
</header>
</div>
Related
I have this HTML:
<div id="container">
<div id="content"></div>
<div id="close-button"></div>
</div>
and this CSS:
#container {
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
float: right;
margin-left: 100%;
height: 50px;
width: 50px;
background-color: red;
}
JSFiddle: https://jsfiddle.net/Le53m70b/
How can I make the red box overlaid on top of the gray one, instead of being on a separate line? Note that the size of the container is not fixed, but regardless of its width, I'd like the gray box to cover 100% of it and the red box to be at its very right.
Ah, this finally works: https://jsfiddle.net/Le53m70b/1/
#container {
position: relative;
width: 50%;
}
#content {
width: 100%;
height: 50px;
background-color: gray;
}
#close-button {
position: absolute;
right: 0;
top: 0;
height: 50px;
width: 50px;
background-color: red;
}
You can use z-index property. Which is used to overlay an individual div over another div element.
#container{
width: 200px;
height: 200px;
position: relative;
margin: 20px;
}
#content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
#close-button{
z-index: 9;
margin: 20px;
}
I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 2;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Few things:
You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.
Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.
The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)
.outerWrap {
position: relative;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
You got your z-index backwards. put layer1 at 2 and layer2 at 1
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Alright so I got 1 div that is float left and one with float right, now for some reason I cannot make them go to the side where they should be. They are kinda now both overlapping eachother
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
}
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left"></div>
<div id="page_right"></div>
</div>
I also tried using a method with display inline block but it didnt work out so well
Try this with your additional css
CSS
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left {
left: 0;
}
#page_right {
right: 0;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
remove left: 0px
OR
remove position: absolute
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
z-index: 1000;
}
the overflow in happened because you given left:0px and position:absolute for both the divs,I'm solved this and and added the snippet below.
* {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
}
html, body {
width: 100%;
height: 100%;
}
#main {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
#main img {
width: 100%;
height: 100%;
}
#page_left, #page_right {
width: 50%;
height: 100%;
background-color: red;
position: absolute;
top: 0px;
z-index: 1000;
}
#page_left{
left: 0px;
}
#page_right{
background-color:green;
float:right;
position: absolute;
right: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="main">
<img src="img/background.jpg"/>
<div id="page_left">
</div>
<div id="page_right">
</div>
</div>
</body>
</html>
In the following code, on hovering over the green button, the blue bar appears.
But when I write the words "About Me" on the about_button div (ie the green button), the shape of the button changes.
How can I successfully write "About Me" on the green button without spoiling the shape of the button?
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
add vertical-align:top to it, because inline-block by default has vertical-align:baseline
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align:top; /** THIS LINE */
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button">About Me</div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</body>
</html>
change position on #about_button from relative to absolute
You have the attribute display:inline-block on the button, this forces the shape wrap around the content inside it. Change it to display:block.
I am trying to vertically and horizontally center a div inside another div that has the overflow: hidden I have successfully been able to horizontally center it, but not vertically.
HTML
<div class="outer">
<div class="inner">
<div class="content">
<p>Alot of content</p>
</div>
</div>
</div>
CSS
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
bottom: -50%;
right: -50%;
}
.content {
position: relative;
top: -50%;
left: -50%;
width: 500px;
height: 500px;
}
FIDDLE
Why is my top: -50% being ignored, but my left: -50% is working as expected?
DEMO
Actually fiddle is not clear.
I don't know about horizontal center. So I added it. But if you don't want it skip it.
For vertically center, you may try this:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
display: inline-block;
position: relative;
text-align:center; //horizontal center
}
.content {
position: relative;
display: table-cell; //<-vertical center
text-align: center; //<-vertical center
width: 500px;
height: 500px;
}
You can always center any element using following code without negative margin hack.
The content will automatically align center from top, bottom, left, right
HTML:
<div class="outer">
<div class="content">
</div>
</div>
CSS:
.outer {
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
position: relative;
}
.content {
left: 0;
right: 0;
top: 0;
bottom: 0;
position: absolute;
margin: auto;
}
Taken from this article, you can use a class like this as long as you have a declared height:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
If you add that class to your outer div everything should work.
I was trying to avoid using translate3d to solve this for older IE support, but in the end couldn't figure out why my top: -50% didn't work. :(
Here is the CSS I ended up with.
.outer {
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
background: yellow;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.content {
position: relative;
top: 0;
left: 0;
width: 500px;
height: 500px;
}
FIDDLE