I working a layout that changes the behavior of z-index.
Is this possible?
The yellow box is a dropdown menu. It should be inside the Red box.
Pretty much anything is possible with CSS3. However the element inside div 1 would need to be separate for this to work. If it's inside div 1 it will drag div 1 around with it. You'll get much more flexibility if the side div is on it's own
But for your specific example you would need something like:
HTML:
<div class="top"></div>
<div class="bottom"></div>
<div class="side"></div>
CSS:
.top {
width: 90%;
margin-left: 10%;
height: 200px;
height: 250px;
background: red;
}
.bottom {
width: 90%;
height: 200px;
height: 250px;
margin-left: 5%;
background: grey;
margin-top: -150px;
}
.side {
width: 20%;
height: 200px;
height: 250px;
margin-left: 78%;
background: yellow;
margin-top: -300px;
}
Working CodePen is here too: https://codepen.io/WebDevelopWolf/pen/mBLqxm
Not sure why this works, but it may be helpful for you:
#div1, #div2{
width: 100%;
height: 400px;
}
#div1{
background-color: red;
position: relative;
}
#div2{
background-color: green;
}
#div2{
margin-left: 50px;
margin-top: -300px;
position: relative;
}
#div1 > div{
background-color: yellow;
position: absolute;
width: 200px;
height: 200px;
right: 0;
top: 50px;
z-index: 2;
}
.as-console-wrapper{ display: none !important;}
<div id="div1">
DIV 1
<div>INSIDE DIV 1</div>
</div>
<div id="div2">
DIV 2
</div>
Here is all you need
div {
height: 100px;
width: 100px;
background: #ccc;
position: absolute;
top: 0;
left: 0;
}
.div1{
background: #f00;
}
.div2{
top: 30px;
}
.div_child{
background: #3a2525;
left: auto;
right: 0;
width: 50px;
z-index: 1;
}
<div class="div1">
1
<div class="div_child">
child
</div>
</div>
<div class="div2">
2
</div>
Related
I tried to put a child div that will come under its parent and over the other elements.
.box1{
background-color: blue;
width: 500px;
height: 100px;
position: relative;
z-index: 3;
}
.box2{
position: absolute;
background-color: red;
width: 200px;
height: 100px;
left: 30%;
top: 20px;
z-index: 2;
}
.box3{
background-color: yellow;
width: 500px;
height: 100px;
z-index: 1;
}
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
I want to position the red rectangle to be under the blue and over the yellow. I put the z-index on three of them. However, it doesn't work.
What do you think about this? Thanks!
Update: Although the boxes are in the right order, however, the elements inside those boxes cannot be clicked now.
You can take a look at the error here: https://jsfiddle.net/p1xd6zah/
You can do a hack with z-index:
You can add z-index: -1 to box2. (stacks the child below the parent)
Add z-index: -2 and position: relative to box3 (now stack this behind box2)
Remove the z-index from box1 - see demo below:
.box1 {
background-color: blue;
width: 500px;
height: 100px;
position: relative;
}
.box2 {
position: absolute;
background-color: red;
width: 200px;
height: 100px;
left: 30%;
top: 20px;
z-index: -1;
}
.box3 {
background-color: yellow;
width: 500px;
height: 100px;
z-index: -2;
position: relative;
}
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
How to make the green div wrap around the blue and yellow divs (his children)
in this particular problem:
https://jsfiddle.net/y74ueuLa/
HTML
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
CSS
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
}
#one {
width: 100%;
height: 150px;
background-color: blue;
position: absolute;
z-index:-1;
}
#two {
position: relative;
top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
}
The green div is wrapped around the blue div. It just doesn't appear that way because the blue div is on top.
With div #two you're positioning it relatively with top 100px. When you position something relative, you're moving the visual component of the div relative to where it would naturally fall in the browser. It's equivalent to saying "visually move down 150px from where you are". You could just make the green div taller, but I don't think that's what you're going for.
I think what you're trying to do (and please correct me if I'm wrong), is this:
https://jsfiddle.net/dk6L1zLL/
#main {
width: 100%;
background-color: green;
z-index: -2;
position: relative;
margin-bottom: 10px;
padding-top:10px;
padding-bottom:10px;
}
#one {
//width: 100%;
height: 150px;
background-color: blue;
//position: absolute;
z-index:-1;
margin:0 10px 0;
}
#two {
//position: relative;
//top: 100px;
z-index:3;
width: 300px;
height: 500px;
background-color: yellow;
margin: 0px auto;
/*margin-bottom: 500px;*/
}
#footer {
height: 100px;
background-color: red;
width: 100%;
position: relative;
z-index: -3;
}
<body>
<div id="main">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="footer"></div>
</body>
I got rid of a lot of the positioning rules and added some margin and padding.
I'm trying to achieve something but in vain. I have put the image below, it's worth a thousand words.
Basically I'm trying to center div 3, which is in div 2, between div 1 and 2 exactly to achieve the following result
Now, here's my HTML and CSS code:
HTML
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
</div>
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
}
I don't have a clear idea on how to achieve it. Any help is appreciated. Thanks.
You could always try using the CSS position property?
CSS
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:left
background-color: red;
}
#circle{
width: 100px;
height: 100px;
margin-left: 30px;
background-color: black;
position:absolute;
top:/* VALUE GOES HERE */;
left:/* VALUE GOES HERE */;
}
top:50px; drops the element down 50px
left:50px; moves the element to the right 50px
Can be done with position:absolute;(along with the positions as shown below) to the #circle and position:relative to the #container.
Here's the fiddle: http://jsfiddle.net/a081j6bv/1/
#container{
position:relative;
}
#circle{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
Assuming that you are going to have the "circle" div set as a static height/width you can do it by positioning it absolutely 50% left and top and then set a negative margin to half the size of the circle div.
HTML:
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
</div>
<div id="circle">
<!-- 3. Contains the image -->
</div>
</div>
CSS:
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position:relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 100px;
background-color: black;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
JSFiddle
You need to give the #container a relative positioning and an absolute positioning to the circle.
#container{
width: 600px;
float: left;
padding: 0;
margin: 0 auto;
position: relative;
}
#leftSide{
width: 300px;
height: 300px;
float:left;
background-color: blue;
}
#rightSide{
width: 300px;
height: 300px;
float:right;
background-color: red;
}
#circle{
width: 100px;
height: 200px;
position: absolute;
left:0;
right: 0;
top:0;
bottom:0;
margin: auto;
background-color: black;
}
#circle img{
width: 100px;
height: 100px;
}
<div id="container">
<div id="leftSide">
<!-- 1. -->
</div>
<div id="rightSide">
<!-- 2. -->
<div id="circle">
<!-- 3. Contains the image -->
<img src="http://i.imgur.com/lrg4uy5.jpg"/>
<img src="http://i.imgur.com/RLKixQW.png"/>
</div>
</div>
</div>
According to your tastes and needs, you may choose one of the 4 following templates:
#1 Center circle using position, top, bottom, left, right and margin properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#2 Center circle using position, top, left, margin-top and margin-left properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
margin-top: -70px;
margin-left: -70px;
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#3 Center circle using position, top, left and transform properties
#container {
height: 300px;
/* prepare #container to center #circle */
position: relative;
}
#leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
}
#rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
/* center #circle inside #container */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="container">
<div id="leftSide"></div>
<div id="rightSide">
<div id="circle"></div>
</div>
</div>
#4 Center circle using Flexbox
Note that the following HTML snippet is different from the previous ones.
#container {
height: 300px;
background: linear-gradient(90deg, blue 50%, red 50%);
/* prepare #container to center #circle */
display: flex;
align-items: center;
justify-content: center;
}
#circle {
background-color: black;
border-radius: 50%;
height: 140px;
width: 140px;
}
<div id="container">
<div id="circle"></div>
</div>
hey guys i had the same problem as a beginner..so to achieve the effect i had to set the container's position to relative and the image's position to absolute...works like magic
-ENJOY!
i have div area which is devided in to 4 equal parts, like the one atached.
now i need another div to be placed at the bottom area as an overlay to the above div. Imagine it like a text scroll area on the bottom side of the TV and the TV screen is constructed by 4 divs.
I am able to create the 5 divs. now the issue is that the 5th div(scroll area) is not going above the bottom edge of the 2 lower divs (3 and 4). I also had put z-index also but failed
can anybody share a sample for styling this.
You can solve it this way:
HTML:
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="area"></div>
<div class="overlay"></div>
CSS:
.area{
float: left;
width: 49%;
height: 300px;
border: 1px solid black;
}
.overlay{
width: 200px;
height: 100px;
background-color: blue;
clear: both;
position: absolute;
bottom: 30px;
margin: -100px;
left: 50%;
}
Please note that I have used hard coded example values. The actual values depends on which context the markup is in.
Without your code it's hard to figure what's not working.
If I understand what you want this is what I would have done:
<div class="container">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="overlay"></div>
</div>
css:
.container {
position: relative;
width: 600px; /* use the size you want */
height: 400px;
}
.container div {
position: absolute;
width: 50%;
height: 50%;
}
.container .block1 { top: 0; left: 0; background: pink; }
.container .block2 { top: 50%; left: 0; background: red; }
.container .block3 { top: 0; left: 50%; background: green; }
.container .block4 { top: 50%; left: 50%; background: blue; }
.container .overlay {
position: absolute;
width: 80%;
height: 100px;
left: 10%;
bottom: 30px; /* distance from the bottom */
z-index: 1;
background: yellow;
}
I want to create a layout like this:
The left column (yellow): width 150px constant - height dynamic
The middle column (azure): width dynamic - height dynamic
The right column (green): width 150px constant - height dynamic
The footer (red): width dynamic - height constant
I'm looking for a CSS-only solution.
jsFiddle here.
http://fiddle.jshell.net/2bSaP/show/
HTML :
<div id="container">
<div id="yellow"></div>
<div id="blue"></div>
<div id="green"></div>
<div id="red"></div>
</div>
CSS :
body {
margin: 0;
}
#yellow {
background: yellow;
position: absolute;
width: 150px;
top: 0;
left: 0;
bottom: 155px;
}
#blue {
background: rgb(98, 196, 255);
position: absolute;
top: 0;
right: 155px;
left: 155px;
bottom: 155px;
}
#green {
background: green;
position: absolute;
width: 150px;
top: 0;
right: 0;
bottom: 155px;
}
#red {
background: brown;
position: absolute;
height: 150px;
left: 0;
right: 0;
bottom: 0;
}
Used
now you forget position define position value in your css
as like this
#blue{
position: absolute;
}
Not sure if this is what you wanted, but I got rid of all those height rules for #Blue and just added height: 100%, then gave #Red a higher z-index (55, for instance).
Now the center square appears to always be blue.
http://jsfiddle.net/qXKZh/38/
Hope this helps
I'm really not sure what you're trying to accomplish. Is it supposed to look the way MusikAnimal's jsfiddle looks?
If so, I'd go for a different structure (complete with the right heights and widths...):
<div id="for3columns" style="height: 500px;">
<div id="yellow_column" style="float: left; width: 20%; height: 100%"></div>
<div id="blue_column" style="float: left; width: 60%; height: 100%"></div>
<div id="green_column" style="float: left; width: 20%; height: 100%"></div>
</div>
<div id="lower_red" style="clear:both; width: 100%; height: 100px;"></div>
It's a little difficult to understand what your question is, but from what I gather, I was able to get to this solution: Fiddle
HTML
<div class='container'>
<div class='col col-left'></div>
<div class='col col-mid'></div>
<div class='col col-right'></div>
<div class='col col-bottom'></div>
</div>
CSS
.container {
width: 960px;
margin: 0 auto;
}
.col {
margin: 0;
padding: 0;
float: left;
}
.col-left {
width: 25%;
height: 200px;
background: #f90a7b;
}
.col-mid {
width: 50%;
height: 200px;
background: #e3f606;
}
.col-right {
width: 25%;
height: 200px;
background: #46c704;
}
.col-bottom {
width: 100%;
height: 200px;
background: #0654e0;
}