I have a root div with a max width and then a container and some children in absolute.
.root {
background-color: tomato;
max-width: 400px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
position: relative;
}
.item {
background-color: steelblue;
width: 100px;
height: 100px;
position: absolute;
}
<div class="root">
<div class="container ">
<div class="item" style="top: 0px; left: 0px"></div>
<div class="item" style="top: 0px; left: 110px"></div>
<div class="item" style="top: 0px; left: 220px"></div>
<div class="item" style="top: 110px; left: 0px"></div>
</div>
</div>
Why the tomato background isn't visible? Why that div has height = 0?
What I want to achieve is a the root div with a max-width and then some children in absolute position that do not overflow the parent div
You root doesn't have height. When you set your items position to absolute you removed element from the normal document flow, and no space is created for the element in the page layout
Change height for .root 100% to 100vh
.root {
background-color: tomato;
max-width: 400px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
position: relative;
}
.item {
background-color: steelblue;
width: 100px;
height: 100px;
position: absolute;
}
<div class="root">
<div class="container ">
<div class="item" style="top: 0px; left: 0px"></div>
<div class="item" style="top: 0px; left: 110px"></div>
<div class="item" style="top: 0px; left: 220px"></div>
<div class="item" style="top: 110px; left: 0px"></div>
</div>
</div>
.root {
background-color: tomato;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.container {
}
.item {
background-color: steelblue;
width: 100px;
height: 100px;
position: absolute;
}
<div class="root">
<div class="container ">
<div class="item" style="top: 0px; left: 0px"></div>
<div class="item" style="top: 0px; left: 110px"></div>
<div class="item" style="top: 0px; left: 220px"></div>
<div class="item" style="top: 110px; left: 0px"></div>
</div>
</div>
Related
How can I center this image that I have in this div in a way that it won't move the 'line' div? I want the line to be touching the top of the square too.
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
Here is one way to prevent it from disrupting the flow layout of your container:
you can make the container a position of relative, and the image a position of absolute, positioned off the top and left by 50%, then transform it so that the center of the image is in the center position.
You could also just make the image a background-image of the div instead of using an image element, which may be easier to manipulate.
.black {
background: black;
}
.square {
position: relative;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
</div>
I'm not sure I understand your exact desired end goal. But, if I understand correctly, you could create a flex parent to justify the image, and then position the line absolutely within that. See -
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
background-color: red;
position: absolute;
left: 0;
top: 0;
bottom: 0
}
<div class="square black">
<div class="line"></div>
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
You can just use these css for .square and .image
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
position: relative;
}
.image {
height: 60px;
width: 60px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
You can easily center a image by using CSS position absolute. By making the position of square black class "absolute" and apply to properties "top: 45%;" and "left: 47%" . By applying this your problem will be definitely solve.
.black {
background: black;
}
.square {
display: flex;
align-item: center;
justify-content: center;
width: 200px;
height: 500px;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
</div>
</div>
.black {
background: black;
}
.square {
position: absolute;
top: 45%;
left: 47%;
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
position: absolute;
top:50%;
left:50%;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
.black {
background: black;
}
.square {
width: 200px;
height: 500px;
margin: 37px auto;
border-radius: 2px;
}
.image {
height: 60px;
width: 60px;
}
.line {
width: 4px;
height: 500px;
background-color: red;
}
<div class="container">
<div class="square black">
<img class="image" src="https://c.neh.tw/thumb/f/720/5659673474629632.jpg">
<div class="wrapper">
<div class="line"></div>
<div class="rectangle"></div>
</div>
</div>
So at first I set the blue container's height and width to 25px and to translate it to the top right corner of the green container I simply translate x to 100-25=75px and it works fine,
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 25px;
width: 25px;
background-color: blue;
transform-origin: center center;
transform: translateX(75px);
"
></div>
</div>
Now I want to achieve the same with scale. I set height and width of blue container to 40px and I scale it to 0.625 which basically sets the height and width of blue container to 25px like above. However now when I want to translate it I can't translate with the above value i.e. 75px. I tried putting the blue container back to top left and again tried translating to 75px but it still doesn't work,
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: center center;
transform: scale(0.625) translateX(-15px) translateY(-15px)
translateX(75px);
"
></div>
</div>
Translate then scale and set the origin to be top right
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: top right;
transform:translate(60px) scale(0.625);
"
></div>
</div>
Or like below (96 = 60/0.625)
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform-origin: top right;
transform:scale(0.625) translate(96px);
"
></div>
</div>
UPDATE
without transform-origin (30% = ((1-0.625)/2)/0.625) * 100%)
<div id="app" style="margin: 20px">
<div
style="
position: absolute;
height: 300px;
width: 300px;
background-color: red;
"
></div>
<div
style="
position: absolute;
height: 100px;
width: 100px;
background-color: green;
"
></div>
<div
style="
position: absolute;
height: 40px;
width: 40px;
background-color: blue;
transform:translate(60px) scale(0.625) translate(30%,-30%);
"
></div>
</div>
I want to cover the child img with the color of the parent div.
Actual the child img covers the divs color.
I gave the child a lower z-index then the parent, but that changes nothing.
I can't add new html-tags and want to use css.
Have somebody a solution?
body {
display: block;
max-width: 1280px;
width: 100%;
background: black;
margin: auto;
}
main {
display: flex;
justify-content: space-around;
width: 100%;
height: 200px;
background: grey;
}
.parent {
display: flex;
justify-content: space-around;
align-items: center;
width: 23%;
height: 40%;
margin: 1%;
background-color: red;
opacity: 0.5;
position: relative;
z-index: 2;
}
.child {
position: absolute;
max-width: 100%;
max-height: 100%;
z-index: 1;
}
<main>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
</main>
You can not use z-index to move a child element behind a parent. You can however create an extra child inside the parent with the ::before pseudo element. Set this to position: absolute so it will cover the image. In the below example I've set the width to 50% so you can see what is happening.
body {
display: block;
max-width: 1280px;
width: 100%;
background: black;
margin: auto;
}
main {
display: flex;
justify-content: space-around;
width: 100%;
height: 200px;
background: grey;
}
.parent {
width: 23%;
height: 40%;
margin: 1%;
background-color: red;
opacity: 0.5;
position: relative;
}
.child {
max-width: 100%;
max-height: 100%;
}
.parent::before {
content: '';
display: block;
width: 50%;
height: 100%;
background: red;
position: absolute;
}
<main>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
</main>
Try adding :after pseudo element as shown in below code.
body {
display: block;
max-width: 1280px;
width: 100%;
background: black;
margin: auto;
}
main {
display: flex;
justify-content: space-around;
width: 100%;
height: 200px;
background: grey;
}
.parent {
display: flex;
justify-content: space-around;
align-items: center;
width: 23%;
height: 40%;
margin: 1%;
background-color: red;
opacity: 0.5;
position: relative;
z-index: 2;
}
.parent:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
z-index:2;
}
.child {
position: absolute;
max-width: 100%;
max-height: 100%;
z-index: 1;
}
<main>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
</main>
I guess what you are searching is kind of an overlay as below. So you need to work on parent's before or after.
.parent:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,0,0,0.5);
}
DEMO
body {
display: block;
max-width: 1280px;
width: 100%;
background: black;
margin: auto;
}
main {
display: flex;
justify-content: space-around;
width: 100%;
height: 200px;
background: grey;
}
.parent {
display: flex;
justify-content: space-around;
align-items: center;
width: 23%;
height: 40%;
margin: 1%;
background-color: red;
opacity: 0.5;
position: relative;
/*z-index: 2;*/
}
.child {
/*position: absolute;*/
max-width: 100%;
max-height: 100%;
/*z-index: 1;*/
}
.parent:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,0,0,0.5);
}
<main>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
<div class="parent">
<img class="child" src="https://cdn.kika.de/logo/bilder/logo-logo-die-welt-und-ich100-resimage_v-tsmall169_w-448.png?version=7362">
</div>
</main>
I personally use bootstrap and add the container function. In the container function you could add your functions. (you dont need to add your elements into a container however I would.) next add this to the stuff you want to have on top of parent div:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
the top 50% and left 50% makes it so your image is centered however this depends on how big your image etc is. Just play around with it and it will work.
I have a problem with the following snippet: I need to make it work in Internet Explorer 11. In Chrome, Firefox and Edge it looks like it should.
There are 3 elements (red, yellow, green), beneeth each other. Another blue element with 50% of the height is on top of the others.
This is how it should look like:
However Internet Explorer 11 puts the blue element on the right side beneeth the others and not on top of them. Can you guys help me with that problem?
This is how it looks in IE11 - it should not look like this
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
The problem
The issue is that you are positioning .inner absolutely but not giving it a specific position. This means that where the browser first renders it is where it will output on screen. It seems IE handles this differently to other browsers which is why you are getting the discrepancy.
The solution
The following modifications would be required:
Add left: 0; to .inner to align it to the left of .flex-wrapper
Add top: 50%; to .inner to move it down 50% of .flex-wrapper and transform: translateY(-50%); to move it back up by 50% of its height
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
height: 30%;
align-self: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
I would made some changes.
First:
- Position .inner
- Make it full height thanks to its position
- Make it display: flex
.inner {
position: absolute;
top: 0; bottom: 0; left: 0;
display: flex;
}
Second:
- Give a height to .inner-element
- Center it
.inner-element {
height: 30%;
align-self: center;
}
.wrapper {
display: block;
height: 50px;
}
.flex-wrapper {
height: 100%;
width: 100%;
position: relative;
display: flex;
margin: 2px 0;
}
.outer,
.inner {
width: 100%;
max-width: 100%;
display: flex;
}
.outer {
height: 100%;
}
.inner {
/*height: 30%; No need for that anymore */
/*align-self: center; No need for that anymore */
position: absolute;
top: 0;
bottom: 0;
left: 0; /* Now it's in the right position */
display: flex; /* To be able to align the inner-element */
}
.inner-element,
.outer-element {
height: 100%;
max-width: 100%;
align-self: flex-start;
}
.inner-element {
height: 30%; /* Make it the right height */
align-self: center; /* Center it */
}
<div class="wrapper">
<div class="flex-wrapper">
<div class="outer">
<div class="outer-element" style="width: 10%; background-color: red"></div>
<div class="outer-element" style="width: 50%; background-color: yellow"></div>
<div class="outer-element" style="width: 40%; background-color: green"></div>
</div>
<div class="inner">
<div class="inner-element" style="width: 50%; background-color: blue"></div>
</div>
</div>
</div>
I don't understand why the float: right doesn't work on the other box.
Anyone who can help me about this?
This is my code:
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
This is the resulting image of my code:
This is the resulting image I want to achieve:
Because of position: absolute on bottom-boxes so you need to add width: 100%
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
But here is better solution using flexbox
.main-box {
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: black;
}
.row {
display: flex;
justify-content: space-between;
}
.box {
width: 50px;
height: 50px;
background: red;
}
<div class="main-box">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Here's a working fiddle
When you put absolute position on a container, you have to specify also top, right and left property with bottom property to set a width and a height of it.
.bottom-boxes{
position:absolute;
bottom: 0;
left: 0;
right: 0;
}
In this case, left: 0; and right: 0; are equivalent to width: 100%; and top: 0 and bottom: 0; are equivalent to height: 100%;
When you don't specify a value, by default it's "auto;"
float won't work on an absolutely positioned element - you need to give top or bottom and right or left parameters to it (the default setting is top: 0; and left: 0;, i.e. the upper left corner of the parent element).