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>
Related
I have this reindeer code, but it is very off center. I made this following a tutorial but in the tutorial it worked great but not on mine.
This is all the CCS code for the reindeer.
.reindeer {
height: 510px;
width: 350px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 320px;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 340px;
top: 300px;
}
.leg2 {
left: 380px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 305px;
z-index: -1;
}
Im not sure how it made my reindeer so far off the center, I have tried changing relative to absolute, but it wont work. Anyone want to help me? This is a school project, and i need it done very fast.
https://imgur.com/a/rNKdyut
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
I found out something, but again same problem with it not being completely centered. I forgot to add the
height: 510px;
width: 350px;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
in the .raindeer
And now it is more centered but i dont know how to make it more centered.
Excellent work on the styles for this. Rather than trying to make the reindeer centred - the simplest approach is to put the reindeer in a div and centre that - I am using 100vw and 100vh to make the container the full screen size - and then flex to align it to the vertical and horizontal centres.
UPDATE - I also adjusted your left positions of the different elements. You can also do this with flex - but to keep it as simple as possible - I just reduced the left values that you have.
Its bbest to view this in the full screen snippet - and again - damn fine work on the styling - I like what you have done :)
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content:center
}
.reindeer {
position: relative;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 0;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 70px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 50px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 15px;
top: 300px;
}
.leg2 {
left: 55px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: -15px;
z-index: -1;
}
<div class="wrapper">
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
</div>
.header {
height: 100%;
width: 50%;
display: flex;
align-items: center;
justify-content:center
}
.reindeer {
position: relative;
}
.face {
background-color: #A98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 320px;
}
.antler1, .antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6C584C;
border-top: 10px solid #6C584C;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1, .a2, .a3 {
background-color: #6C584C;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1, .eye2{
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1, .ear2 {
background-color: #95755E;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #EE0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #F8453B;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1, .leg2 {
background-color: #6C584C;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 340px;
top: 300px;
}
.leg2 {
left: 380px;
top: 200px;
}
.body {
background-color: #95755E;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 305px;
z-index: -1;
}
<div class="header">
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
</div>
It's all to do with you setting the left properties in your CSS. If you reduce these to shift the reindeer bits to just occupy the reindeer div you can then set the reindeer width to fit-content then use margin: auto to position it in the center of your screen.
Here's a couple of good videos by Kevin Powell on positioning here and here.
An explainer on how to use margin to center elements can be found on CSS tricks
If you like this sort of thing then try some of the challenges at CSS battle. It'll really sharpen your skills up.
Nice reindeer btw.
.pos {
/*this is used to draw a centerline down the screen. Feel free to delete this*/
position: fixed;
width: 50%;
height: 700px;
border-right: 1px solid red;
}
.reindeer {
/*position: relative; removed this */
width: fit-content; /* added this */
margin: auto; /* added this */
}
.face {
background-color: #a98467;
height: 150px;
width: 100px;
border-radius: 70px;
position: relative;
top: 200px;
left: 22px; /* reduced this */
}
.antler1,
.antler2 {
height: 25px;
width: 96px;
border-right: 10px solid #6c584c;
border-top: 10px solid #6c584c;
border-radius: 0 20px 0 0;
z-index: -2;
position: relative;
bottom: 15px;
right: 65px;
}
.a1,
.a2,
.a3 {
background-color: #6c584c;
height: 55px;
width: 10px;
border-radius: 10px;
position: relative;
}
.a1 {
bottom: 55px;
}
.a2 {
bottom: 110px;
left: 30px;
}
.a3 {
bottom: 165px;
left: 60px;
}
.antler2 {
left: 65px;
bottom: 40px;
transform: rotateY(180deg);
}
.eye1,
.eye2 {
background-color: #333333;
height: 20px;
width: 20px;
border-radius: 50%;
position: relative;
}
.eye1 {
bottom: 5px;
left: 15px;
}
.eye2 {
bottom: 25px;
left: 60px;
}
.eyeball {
background-color: white;
height: 8px;
width: 8px;
border-radius: 50%;
position: relative;
top: 5px;
left: 5px;
}
.ear1,
.ear2 {
background-color: #95755e;
height: 30px;
width: 60px;
border-radius: 0 0 30px 30px;
position: relative;
z-index: -1;
}
.ear1 {
bottom: 75px;
right: 23px;
transform: rotate(-25deg);
}
.ear2 {
bottom: 105px;
left: 60px;
transform: rotate(25deg);
}
.nose {
background-color: #ee0000;
height: 22px;
width: 35px;
border-radius: 50%;
position: relative;
bottom: 60px;
left: 30px;
}
.nose2 {
background-color: #f8453b;
height: 9px;
width: 15px;
border-radius: 50%;
position: relative;
bottom: 78px;
left: 43px;
}
.leg1,
.leg2 {
background-color: #6c584c;
height: 100px;
width: 20px;
position: relative;
border-radius: 0 0 8px 8px;
z-index: -2;
}
.leg1 {
left: 40px; /*reduced this */
top: 300px;
}
.leg2 {
left: 85px; /*reduced this */
top: 200px;
}
.body {
background-color: #95755e;
height: 200px;
width: 130px;
border-radius: 100px;
position: relative;
bottom: 60px;
left: 5px; /* reduced this */
z-index: -1;
}
<div class='pos'></div>
<div class="reindeer">
<div class="face">
<div class="antler1">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="antler2">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="eye1">
<div class="eyeball"></div>
</div>
<div class="eye2">
<div class="eyeball"></div>
</div>
<div class="ear1"></div>
<div class="ear2"></div>
<div class="nose"></div>
<div class="nose2"></div>
</div>
<div class="leg1"></div>
<div class="leg2"></div>
<div class="body"></div>
</div>
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>
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.
I am trying to make nested divs, so I can position children with top and left, so they can overlap each other:
https://jsfiddle.net/e0cpuarv/
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
It works with one huge drawback - children just are on the top of parent. What should I do to make them be inside parent, like this?
desiredresult
In fact, children may be not DIVs, IMGs will be enough too, if this helps
try this one:
body{margin:0px;padding:0px;}
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 40px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 30px;
background-color: blue;
}
DEMO HERE
Change this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
to this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
Here is the JSFiddle demo
Basically you add overflow:hidden to the parent element .boo :)
just make the main div (.boo) position: relative
see the code, and change the left and top values for kah1 and kah2 to position the inner boxes
.boo {
position: relative;
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 70px;
background-color: red;
}
.kah1 {
position: absolute;
left: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
right: 25px;
top: 12px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
You can hide the overwflow with overflow: hidden, so in your case the css would be like this:
.boo {
position: absolute;
left: 10px;
top: 10px;
width: 100px;
height: 70px;
background-color: red;
overflow: hidden;
}
.kah1 {
position: absolute;
left: 20px;
top: 30px;
width: 50px;
height: 50px;
background-color: green;
}
.kah2 {
position: absolute;
left: 30px;
top: 40px;
width: 50px;
height: 50px;
background-color: blue;
}
<body>
<div class="boo">
<div class="kah1"></div>
<div class="kah2"></div>
</div>
</body>
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;
}