I have 10 non-nested div elements, each decreasing in size. In the CSS file they all are set to "position: absolute". They end up inside of each other which is what I want, but they are not centered.
Is it even possible to center them inside of each other while they aren't nested? I tried "position: relative", but that didn't do anything.
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#outer {
background-color: thistle;
height: 200px;
width: 200px;
position: absolute;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
position: absolute;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
position: absolute;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
position: absolute;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
position: absolute;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
position: absolute;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
position: absolute;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
position: absolute;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
position: absolute;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
position: absolute;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
position: absolute;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
position: absolute;
}
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</body>
</html>
The easiest way is to wrap them inside an inline-block element and remove position:absolute from the biggest one then you can easily center them:
* {
box-sizing: border-box;
}
.main {
display: inline-block;
position: relative;
}
.main>div:not(:first-child) {
border-radius: 5px;
padding: 3px;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#outer {
border-radius: 5px;
padding: 3px;
background-color: thistle;
height: 200px;
width: 200px;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
}
<div class="main">
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</div>
you could center them with calc:
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
position: absolute;
left: calc(50% - 45px);
top: calc(50% - 45px);
}
#outer1 {
background-color: green;
height: 200px;
width: 200px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 100px);
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
position: absolute;
left: calc(50% - 95px);
top: calc(50% - 95px);
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
position: absolute;
left: calc(50% - 90px);
top: calc(50% - 90px);
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
position: absolute;
left: calc(50% - 85px);
top: calc(50% - 85px);
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
position: absolute;
left: calc(50% - 80px);
top: calc(50% - 80px);
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
position: absolute;
left: calc(50% - 75px);
top: calc(50% - 75px);
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
position: absolute;
left: calc(50% - 70px);
top: calc(50% - 70px);
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
position: absolute;
left: calc(50% - 65px);
top: calc(50% - 65px);
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
position: absolute;
left: calc(50% - 60px);
top: calc(50% - 60px);
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
position: absolute;
left: calc(50% - 55px);
top: calc(50% - 55px);
}
#outer10 {
background-color: olive;
height: 100px;
width: 100px;
position: absolute;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="inner"> </div>
<div id="outer1"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer10"> </div>
</body>
</html>
While css vars can't be incremented, the counter-increment can't be used as a property value and the attr() function isn't implemented yet, you still can use css to count elements with :nth-child().
Also, depending on your needs, you can use a css transformation to avoid playing with margins & positions. The browser support is very good.
div {
background-color: gray;
position: absolute;
width: 200px;
height: 200px;
}
div:nth-child(odd) {
background-color: orange;
}
div:nth-child(1) {
transform: scale(.95);
}
div:nth-child(2) {
transform: scale(.9);
}
div:nth-child(3) {
transform: scale(.85);
}
div:nth-child(4) {
transform: scale(.8);
}
/* And so on... */
<div></div>
<div></div>
<div></div>
<div></div>
I think what you need here is just a little margin added to the non-nested containers' CSS:
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#outer {
background-color: thistle;
height: 200px;
width: 200px;
position: absolute;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
margin-left: 5px;
margin-top: 5px;
position: absolute;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
margin-left: 10px;
margin-top: 10px;
position: absolute;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
margin-left: 15px;
margin-top: 15px;
position: absolute;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
margin-left: 20px;
margin-top: 20px;
position: absolute;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
margin-left: 25px;
margin-top: 25px;
position: absolute;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
margin-left: 30px;
margin-top: 30px;
position: absolute;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
margin-left: 35px;
margin-top: 35px;
position: absolute;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
margin-left: 40px;
margin-top: 40px;
position: absolute;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
margin-left: 45px;
margin-top: 45px;
position: absolute;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
margin-left: 50px;
margin-top: 50px;
position: absolute;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
margin-left: 55px;
margin-top: 55px;
position: absolute;
}
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</body>
</html>
This answer is a simple alternative of Temani Afif's answer. It follows the same strategy as to wrap them all inside another div.
body {
font-family: Helvetica, sans-serif;
}
div {
border-radius: 5px;
padding: 3px;
margin: 3px;
}
#outermost{
display:flex;
justify-content:center;
}
#outer {
background-color: thistle;
height: 200px;
width: 200px;
position: absolute;
}
#outer1 {
background-color: cyan;
height: 190px;
width: 190px;
position: absolute;
}
#outer2 {
background-color: darkcyan;
height: 180px;
width: 180px;
position: absolute;
}
#outer3 {
background-color: greenyellow;
height: 170px;
width: 170px;
position: absolute;
}
#outer4 {
background-color: orange;
height: 160px;
width: 160px;
position: absolute;
}
#outer5 {
background-color: rebeccapurple;
height: 150px;
width: 150px;
position: absolute;
}
#outer6 {
background-color: red;
height: 140px;
width: 140px;
position: absolute;
}
#outer7 {
background-color: azure;
height: 130px;
width: 130px;
position: absolute;
}
#outer8 {
background-color: mediumaquamarine;
height: 120px;
width: 120px;
position: absolute;
}
#outer9 {
background-color: salmon;
height: 110px;
width: 110px;
position: absolute;
}
#outer0 {
background-color: olive;
height: 100px;
width: 100px;
position: absolute;
}
#inner {
background-color: lavender;
height: 90px;
width: 90px;
position: absolute;
}
We are using display:flex property to get our job done. HTML would look like
<html>
<head>
<meta charset="utf-8">
<title>Innerconflict</title>
<script src="innerconflict.js" defer></script>
<link rel="stylesheet" type="text/css" href="roundel_1.css">
</head>
<button>RESET</button>
<br>
<br>
<body>
<div id="outermost">
<div id="outer"> </div>
<div id="outer2"> </div>
<div id="outer3"> </div>
<div id="outer4"> </div>
<div id="outer5"> </div>
<div id="outer6"> </div>
<div id="outer7"> </div>
<div id="outer8"> </div>
<div id="outer9"> </div>
<div id="outer0"> </div>
<div id="inner"> </div>
</div>
</body>
</html>
If you need vertical alignment, all you need to do is add align-items:center to #outermost and remove absolute position in #outer. Hope this helps.
This is the fiddle for the vertical and horizontal alignment.
Related
I will show you a simple example related to my task.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<html>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
</html>
As you can see in the above example, there are 2 fixed divs and there is 1 relative div in the first fixed div.
And I am going to show 1 absolute div in the relative div. but it is hidden by the second fixed div.
How to show the whole absolute div without any hidden part.
Just replace your blocks in HTML.
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
z-index: 1000;
}
<html>
<div class="fixed2">
fixed1
</div>
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
</html>
There are multiple ways of doing this
Move div.fixed1 below div.fixed2
(or)
You can increase the z-index of div.fixed1
.fixed1 {
z-index: 1;
}
Use the property z-index, so you will specify that div.fixed1 is in front of div.fixed2:
.fixed1 {
position: fixed;
top: 0;
left: 100px;
width: 100px;
height: 100px;
background-color: yellow;
z-index: 1;
}
.fixed2 {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
.relative {
margin-top: 25px;
width: 50px;
height: 50px;
background-color: blue;
}
.absolute {
position: absolute;
left: -25px;
width: 50px;
height: 50px;
background-color: green;
}
<div class="fixed1">
<div class="relative">
<div class="absolute"></div>
</div>
</div>
<div class="fixed2">
fixed1
</div>
The yellow dot "gif1" has to go inside the black box "gif" but as you can see I somehow managed to did the opposite.
How many things did I do wrong?
Livewave Preview
I already tried overflow:auto or hidden and changing the position attributes from relative to absolute and vice versa.
<html>
<head>
<body>
<center>
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
</center>
<style>
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: relative;
float: left;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
</style>
</head>
</body>
</html>
You are facing a complex situation where the float property is creating the issue. Basically the yellow "image" is wrapping around the floated element and that's why it goes out of the black box and under the blue one (the float element). To avoid this you can use absolute instead of float.
.container {
width: 550px;
height: 430px;
background-color: burlywood;
display: table;
margin: auto;
}
.img_sx {
width: 250px;
height: 430px;
background-color: cadetblue;
position: absolute;
overflow: hidden;
}
.img_dx {
width: 210px;
height: 390px;
background-color: cornflowerblue;
margin-left: 250px;
margin-top: 20px;
position: absolute;
}
.quote {
width: 230px;
height: 100px;
background-color: coral;
margin-left: 250px;
margin-top: 30px;
position: relative;
}
.gif {
width: 230px;
height: 100px;
background-color: black;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.gif1 {
width: 90px;
border-radius: 90px;
}
.gif2 {}
.burp {
width: 230px;
height: 90px;
background-color: white;
margin-left: 250px;
margin-top: 10px;
position: relative;
}
.prot {}
<div class="container">
<div class="img_sx"></div>
<div class="img_dx"></div>
<div class="quote"></div>
<div class="gif"><img class="gif1" src="https://upload.wikimedia.org/wikipedia/commons/f/ff/Scandal_-_Yellow_album_cover.jpg"></div>
<div class="burp"></div>
<div class="prot"></div>
</div>
This is the way to go:
.gif{
position: relative;
}
.gif1{
position:absolute;
}
Hope it helps.
I want the text in the blue box to appear on its opening, but it should be fixed, not adjusting to the blue box width.
I also need some ideas as to what can be other interesting ways to display the text in a similar manner that I just did. (ie not visible initially but on hovering, text visible)
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;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
width: 400px;
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<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>
</body>
</html>
you can just use transform with scale or translate:
scale:
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;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width:400px;
background-color: blue;
display: inline-block;
transform-origin:0 0;
transform: translateX(-4px) scale(0,1);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(4px) scale(1,1);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<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>
</body>
</html>
translate:
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);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<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>
</body>
</html>
You can make the text as sibling to the background. Check out the fiddle.
https://jsfiddle.net/gwbdrskg/
This is the HTML
<body>
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<div class="background"></div>
<p class='text'>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</div>
</body>
And the CSS
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;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
#about_text {
display: inline-block;
position: relative;
width: 400px;
}
#about_text .background {
transition: width 0.5s;
height: 100px;
width: 0;
background-color: blue;
display: inline-block;
transform: translateX(-4px);
overflow: hidden;
}
#about_text .text {
position: absolute;
top: 0;
}
#about {
top: 10%;
}
#about_button:hover + #about_text .background {
width: 400px;
}
I am creating grid with multiple divs and each div has different color. But the following code display all divs in one gray color. How can I change the color of divs?
#container{
width: 400px;
height: 300px;
}
.Rect{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
}
.Rect1{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 100px;
top: -300px;
}
.Rect2{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 200px;
top: -600px;
}
.Rect3{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 300px;
top: -900px;
}
#rectYellow{
width: 100px;
height: 75px;
background: yellow;
border-radius: 25px;
position: relative;
top: -1125px;
left: 100px;
}
#rectGreen{
width: 100px;
height: 75px;
background: green;
border-radius: 25px;
position: relative;
top: -1125px;
left: 200px;
}
#rectBlue{
width: 100px;
height: 75px;
background: blue;
border-radius: 25px;
position: relative;
top: -1200px;
left: 0px;
}
#rectWhite{
width: 100px;
height: 75px;
background: White;
border-radius: 25px;
position: relative;
top: -1425px;
left: 200px;
}
#rectOrange{
width: 100px;
height: 75px;
background: Orange;
border-radius: 25px;
position: relative;
top: -1275px;
left: 100px;
}
<div id=container>
<!--1th row -->
<div class="Rect"></div>
<div class="Rect"></div>
<div id="rectBlue"></div><!--BLUE -->
<div class="Rect"></div>
<!--2th row -->
<div class="Rect1"></div>
<div id="rectYellow"></div><!--YELLOW -->
<div class="Rect1"></div>
<div id="rectOrange"></div><!--ORANGE -->
<!--3th row -->
<div id="rectWhite"></div><!--WHITE -->
<div class="Rect2"></div>
<div id="rectGreen"></div><!--GREEN -->
<div class="Rect2"></div>
<!--4th row -->
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
</div>
I'm stuck about what happened, apologies for the block of code. I couldn't use fiddle.
Your top calculations were off. I've updated them ( switched the white to pink just for the demo ) so that they line up in the snippet.
That being said, I'm unsure of what the end result is supposed to be. It might be easier to use position:absolute; and define a specific dimension for the container than calculate each element's relative position. Or make each element display: inline-block; and let them wrap naturally.
#container{
width: 400px;
height: 300px;
}
.Rect{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
}
.Rect1{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 100px;
top: -300px;
}
.Rect2{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 200px;
top: -600px;
}
.Rect3{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 300px;
top: -900px;
}
#rectYellow{
width: 100px;
height: 75px;
background: yellow;
border-radius: 25px;
position: relative;
top: -300px;
left: 100px;
}
#rectGreen{
width: 100px;
height: 75px;
background: green;
border-radius: 25px;
position: relative;
top: -600px;
left: 200px;
}
#rectBlue{
width: 100px;
height: 75px;
background: blue;
border-radius: 25px;
position: relative;
top: 0px;
left: 0px;
}
#rectWhite{
width: 100px;
height: 75px;
background: pink;
border-radius: 25px;
position: relative;
top: -600px;
left: 200px;
}
#rectOrange{
width: 100px;
height: 75px;
background: Orange;
border-radius: 25px;
position: relative;
top: -300px;
left: 100px;
}
<div id=container>
<!--1th row -->
<div class="Rect"></div>
<div class="Rect"></div>
<div id="rectBlue"></div><!--BLUE -->
<div class="Rect"></div>
<!--2th row -->
<div class="Rect1"></div>
<div id="rectYellow"></div><!--YELLOW -->
<div class="Rect1"></div>
<div id="rectOrange"></div><!--ORANGE -->
<!--3th row -->
<div id="rectWhite"></div><!--WHITE -->
<div class="Rect2"></div>
<div id="rectGreen"></div><!--GREEN -->
<div class="Rect2"></div>
<!--4th row -->
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
</div>
You have invalid top positions in your code. It should be like this:
#container{
width: 400px;
height: 300px;
}
.Rect{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
}
.Rect1{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 100px;
top: -300px;
}
.Rect2{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 200px;
top: -600px;
}
.Rect3{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 300px;
top: -900px;
}
#rectYellow{
width: 100px;
height: 75px;
background: yellow;
border-radius: 25px;
position: relative;
top: -300px;
left: 100px;
}
#rectGreen{
width: 100px;
height: 75px;
background: green;
border-radius: 25px;
position: relative;
top: -600px;
left: 200px;
}
#rectBlue{
width: 100px;
height: 75px;
background: blue;
border-radius: 25px;
position: relative;
top: 0px;
left: 0px;
}
#rectWhite{
width: 100px;
height: 75px;
background: White;
border-radius: 25px;
position: relative;
top: -1425px;
left: 200px;
}
#rectOrange{
width: 100px;
height: 75px;
background: Orange;
border-radius: 25px;
position: relative;
top: -300px;
left: 100px;
}
<div id=container>
<!--1th row -->
<div class="Rect"></div>
<div class="Rect"></div>
<div id="rectBlue"></div><!--BLUE -->
<div class="Rect"></div>
<!--2th row -->
<div class="Rect1"></div>
<div id="rectYellow"></div><!--YELLOW -->
<div class="Rect1"></div>
<div id="rectOrange"></div><!--ORANGE -->
<!--3th row -->
<div id="rectWhite"></div><!--WHITE -->
<div class="Rect2"></div>
<div id="rectGreen"></div><!--GREEN -->
<div class="Rect2"></div>
<!--4th row -->
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
</div>
The only reason that it vanished because you didn't gave the appropriate top and left absolute position, That's what caused the elements to move out of document. But now its fixed and working....
#container{
width: 400px;
height: 300px;
}
.Rect{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
}
.Rect1{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 100px;
top: -300px;
}
.Rect2{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 200px;
top: -600px;
}
.Rect3{
width: 100px;
height: 75px;
background: grey;
border-radius: 25px;
position: relative;
left: 300px;
top: -900px;
}
#rectYellow{
width: 100px;
height: 75px;
background: yellow;
border-radius: 25px;
position: relative;
top: -150px;
left: 100px;
}
#rectGreen{
width: 100px;
height: 75px;
background: green;
border-radius: 25px;
position: relative;
top: -600px;
left: 200px;
}
#rectBlue{
width: 100px;
height: 75px;
background: blue;
border-radius: 25px;
position: relative;
top: -150px;
left: 200px;
}
#rectWhite{
width: 100px;
height: 75px;
background: #ECECEC;
border-radius: 25px;
position: relative;
top: -526px;
left: 100px;
}
#rectOrange{
width: 100px;
height: 75px;
background: Orange;
border-radius: 25px;
position: relative;
top: -375px;
left: 0px;
}
<div id=container>
<!--1th row -->
<div class="Rect"></div>
<div class="Rect"></div>
<div id="rectBlue"></div><!--BLUE -->
<div class="Rect"></div>
<!--2th row -->
<div class="Rect1"></div>
<div id="rectYellow"></div><!--YELLOW -->
<div class="Rect1"></div>
<div id="rectOrange"></div><!--ORANGE -->
<!--3th row -->
<div id="rectWhite"></div><!--WHITE -->
<div class="Rect2"></div>
<div id="rectGreen"></div><!--GREEN -->
<div class="Rect2"></div>
<!--4th row -->
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
<div class="Rect3"></div>
</div>
Is it possible to position child element (C) under its parent (B), and above B's neighbor (C)?
It's a little bit difficult to describe, you can watch example here.
The question is to position blue div.inner above red div.neighbor AND under green div.outer.
To illustrate:
HTML code:
<div class="neighbor"> </div>
<div class="outer">
<div class="inner"></div>
</div>
CSS code:
.neighbor{
background-color: red;
height: 500px;
width: 500px;
}
.outer{
background-color: green;
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
}
.inner{
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left:250px;
}
JsFiddle
HTML:
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
CSS:
.red {
background-color: red;
height: 500px;
width: 500px;
z-index: 1;
}
.green {
background-color: green;
width: 300px;
height: 300px;
position: fixed;
top: 0px;
left: 0px;
z-index: 3;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
position: fixed;
top: 0px;
left: 250px;
z-index: 2;
}
.neighboor {
background-color: red;
height: 500px;
width: 500px;
position:fixed;
z-index:-200;
}
.outer {
background-color: green;
width: 300px;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
}
.inner {
background-color: blue;
width: 100px;
height: 100px;
position:relative;
z-index: -100;
top: 0px;
left: 250px;
}