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.
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>
I want the divs inside content_container to be stacked vertically below each other and not overlap. Please help.
My HTML code:
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
My CSS code:
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav{
position: fixed;
width: 100%;
}
#content{
width: 100%;
}
[1]: https://i.stack.imgur.com/28184.jpg
HTML
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
CSS
#content_container{
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
display: flex;
flex-direction: column;
}
#sub_nav{
position: -webkit-sticky;
position: sticky;
top:0;
width: 100%;
}
#content{
width: 100%;
}
Hope this helps !!
Also, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for full flexbox reference.
Your problem is the "position: fixed;" for the #sub_nav div.
Remove that and they should stack one on top of the other.
It will be much easily to use flex boxes:
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: red;
width: 200px;
}
#content {
flex: 1;
background: blue;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
Try This...
#content_container{
width: 100%;
height: 100%;
display: flex;
}
#sub_nav{
width: 50%;
height: 200px;
background-color: red;
}
#content{
width: 50%;
background-color: blue;
height: 200px;
}
<body>
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
<body>
Much easier to do with flex boxes.
#content_container {
display: flex;
height: 500px;
width: 100%;
}
#sub_nav {
background: white;
width: 100px;
}
#content {
flex: 1;
background: green;
}
<div id=content_container>
<div id=sub_nav>
</div>
<div id=content>
</div>
</div>
position: fixed takes the element out of the flow and make it fixed to the viewport. which leads the next element to overlap.
so you need to let fixed element sub_nav show on top. and content would show by giving it padding on top or move the top start point with relative
element{
position: relative;
top: 20px;
}
Example
#content_container {
float: left;
width: 100%;
height: 100%;
overflow: auto;
text-align: center;
}
#sub_nav {
background-color: yellow;
position: fixed;
width: 100%;
z-index: 1;
}
#content {
background-color: cyan;
width: 100%;
padding-top: 30px;
height: 100px;
}
<div id=content_container>
<div id=sub_nav>sub_nav
</div>
<div id=content>content
</div>
</div>
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 add a image in my container after this when i create another div it overlapping each other i want second div visible below container div
this is html
<header>
<div class="top_nav">
</div>
</header>
<div class="container">
<img src="cover.jpg">
<div id="short-des">
</div>
</div>
<div class="details">
</div>
css
*{
margin: 0;
padding: 0;
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
position: absolute;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
}
.details{
height: 638px;
width: 100%;
position: absolute;
}
i want div name detail to show below the container div
Here's the solution (fiddle):
*{
margin: 0;
padding: 0;
}
.top_nav{
height: 80px;
width: 100%;
background: rgba(0,0,0,.5);
position: relative;
}
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.container img{
width: 100%;
height: 638px;
display: block;
}
.details{
height: 638px;
width: 100%;
}
<header>
<div class="top_nav">
top nav
</div>
</header>
<div class="container">
<img src="http://placehold.it/300x300">
<div id="short-des">
short descr
</div>
</div>
<div class="details">
details
</div>
I guess this is what you want fiddle
.container{
height: 638px;
width: 100%;
max-width: 100%;
overflow: hidden;
background-position: center;
top: 0;
z-index: -1;
}
.details{
height: 638px;
width: 100%;
border:solid 1px red;
}
removed the position:absolute property
<header>
<div class="container">
<div class="top-nav">
</div>
</div>
</header>
<section class="section-one">
<div class="continer">
<div class="image-outer"><img src="your-image">
</div>
<div class="your-title">
</div>
</div>
</section>
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).