I am attempting to place an image (after) behind a parent image. I've used boxes as example of what I am trying to achieve - the blue box is supposed to be behind the green box but no matter what z-index I use it doesn't seem to work.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
z-index: 53;
top: 2%;
z-index: 2;
}
.box:after {
content: '';
//position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -3;
}
<div class="box-wrapper">
<div class="box"></div>
</div>
Remove the z-index of the box and add position:absolute for box:after
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
z-index: 1;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
}
.box:before {
content: '';
position: absolute;
background-color: blue;
height: 50px;
width: 70px;
z-index:-2;
}
jsfiddle
The blue box is supposed to be behind the green box
Just remove all the irrelvant z-index values, then it works perfectly.
.box-wrapper {
position: absolute;
overflow: hidden;
height: 100%;
width: 100%;
top: 0;
}
.box {
background-color: green;
position: relative;
display: block;
height: 52px;
width: 72px;
top: 2%;
color:white;
}
.box:after {
content: '';
position: relative;
background-color: blue;
display: block;
height: 50px;
width: 70px;
z-index: -1;
}
<div class="box-wrapper">
<div class="box">I'm on top</div>
</div>
Related
I am trying to create a progression section, where i have a text, image and progression.
I am able to achieve this but the problem here is that i want the image section and text should be vertical middle align to the parent div.
Is there a way i can use flex instead of relative and absolute.
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
You mean something like that? Add some flex properties to your .progress-info-wrapper class.
.progress-info-wrapper {
position: absolute;
display:flex;
align-items: center;
height: 100%;
}
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
.progress-info-wrapper {
position: absolute;
display:flex;
align-items: center;
height: 100%;
}
img {
width: 20px;
height: 20px;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
To vertically align your image and text, you should use flexbox in progress-info-wrapper
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
display: flex;
align-items: center;
height: 100%;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img"><span class="text-wrapper">Add more items to get offer</span></div>
<div class="progress"></div>
</div>
Flex would help you with layout deciding how the items will need to be positioned next to each other but not over each other.
In that case position:absolute still fits better. To center the element you need the magic of margin: auto but you should give your element an height using fit-content.
Here's your demo with the .progress-info-wrapper css rules changed as:
.progress-info-wrapper {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: fit-content;
}
.progress-bar-container {
background-color: #33cc33;
width: 100%;
position: fixed;
bottom: 0;
z-index: 1;
height: 40px;
}
img {
width: 20px;
height: 20px;
}
.progress-info-wrapper {
position: absolute;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: fit-content;
}
.text-wrapper {
color: #263238;
margin-left: 8px;
}
.progress {
height: 40px;
width: 11%;
background-color: #99ff99;
}
<div class="progress-bar-container">
<div class="progress-info-wrapper">
<img
src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U"
alt="test-img">
<span class="text-wrapper">Add more items to get offer</span>
</div>
<div class="progress"></div>
</div>
I am trying to put a div at the centre . Thats works well but it is not visible on the lower div. i.e the lower div hides the content of the center div. My html code :
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 2;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
Few things:
You don't have to use z-index for all the div's, if you want a specific div to be in front then just give z-index to that.
Since you already using div in your code, the div will sit beneath another be default and in your case layer-1 you want that to be in the front, so just use the z-index only for that and remove for others.
The higher the z-index value it display up-front.(in my code it is simple z-index:1`.)
.outerWrap {
position: relative;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 1;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
You got your z-index backwards. put layer1 at 2 and layer2 at 1
.outerWrap {
position: relative;
z-index: 0;
background-color: #00CCFF;
height: 350px;
width: 650px;
}
.layer1 {
position: absolute;
z-index: 2;
background-color: #6F0;
height: 250px;
width: 350px;
top: 240px;
left: 40px;
}
.layer2 {
position: absolute;
z-index: 1;
background-color: #FC0;
height: 250px;
width: 650px;
top: 350px;
left: 0px;
}
<div class="outerWrap">1
<div class="layer1">2</div>
<div class="layer2">3</div>
</div>
I have a cloud made with HTML/CSS and I'm trying to include some text in the center of it. But I'm having trouble positioning it and having it overlap over the cloud divs.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
overflow: hidden;
position: absolute;
z-index: -2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c">
<p class="text">
this is some text
</p>
</div>
<div id="left_c">
</div>
</div>
Not entirely sure how to make it work, I thought the z-index would allow the text to take "priority" and show first, but it doesn't seem to be working. Do I need to insert the p tags inside another div? Any suggestions would be appreciated!
Remove the text element from its current nesting level. Just make it a sibling of the border divs. Still one overall container.
#cloud {
height: 230px;
margin: 40px;
position: relative;
width: 400px;
}
#cloud div {
border: solid 5px black;
}
#bottom_c {
background-color: #fff;
border-radius: 100px;
height: 150px;
position: absolute;
top: 100px;
width: 350px;
z-index: 0;
}
#right_c{
background-color: #fff;
border-radius: 100%;
height: 150px;
left: 140px;
position: absolute;
top: 40px;
width: 150px;
z-index: -1;
}
#left_c{
background-color: #fff;
border-radius: 100%;
height: 100px;
left: 50px;
position: absolute;
top: 70px;
width: 100px;
z-index: -1;
}
#cloud::before {
background-color: white;
border-radius: 50%;
content: '';
height: 100px;
left: 55px;
position: absolute;
top: 75px;
width: 100px;
z-index: 1;
}
#cloud::after {
position: absolute; top: 45px; left: 145px;
background-color: white;
border-radius: 50%;
content: '';
width: 150px;
height: 150px;
z-index: 1;
}
.text {
position: absolute;
top: 40px;
left: 135px;
z-index: 2;
}
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
<p class="text">this is some text</p>
</div>
If you change your html to:
<div id="cloud">
<div id="bottom_c"></div>
<div id="right_c"></div>
<div id="left_c"></div>
</div>
<p class="text">
this is some text
</p>
and the text element in css to:
.text {
overflow: hidden;
position: absolute;
z-index: 2;
top:200px;
right:200px;
}
then it works.
i have a responsive square with text inside. i want the square to keep his proportions on all sizes, unless the text inside is overflow, than i want the square to be taller.
now, the text is just hidden.
http://jsfiddle.net/38Tnx/2253/
<div class='square-box'>
<div class='square-content'>
<div>
<span>text</span>
</div>
</div>
</div>
.square-box{
position: relative;
width: 50%;
overflow: hidden;
background: #4679BD;
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}
Replace your .square-box css with the following code
.square-box{
position: relative;
width: 50vw;
height: 50vw;
overflow: hidden;
background: #4679BD;
}
JSFIDDLE DEMO
Try this. Hope it helps.
.square-box{
position: relative;
width: 50%;
/*overflow: hidden;*/
/*background: #4679BD;*/
}
.square-box:before{
content: "";
display: block;
padding-top: 100%;
}
.square-content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: white;
}
.square-content div {
display: table;
width: 100%;
height: 100%;
background:#4679BD; /* moved */
}
.square-content span {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white
}
Here is how I want it to look:
I realize this is an ugly mockup and obviously when I do it for real the proportions will look better, but I am wondering how you would go about doing this with CSS.
fiddle is here http://jsfiddle.net/bU3QS/1/
<div class="header">
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
z-index: 10000;
height: 110px;
overflow: hidden;
}
Use the :after pseudo element:
.header:after {
content: '';
position: absolute;
background: black;
width: 50px;
height: 50px;
z-index: 1;
border-radius: 50%; /* Makes the element circular */
bottom: -25px;
left: 50%;
margin-left: -25px;
}
For this solution, overflow: hidden; has been removed from the .header CSS.
Here's a fiddle: http://jsfiddle.net/t97AX/
Here's another approach, that doesn't rely on the width of the semicircle to center it properly:
.header:after {
content: '';
position: relative;
top: 100%;
display: block;
margin: 0 auto;
background: red;
width: 50px;
height: 25px;
border-radius: 0 0 50px 50px;
}
The fiddle (semicircle red for the sake of clarity): http://jsfiddle.net/x4mdC/
More on :before and :after: http://www.w3.org/TR/CSS2/selector.html#before-and-after
Use :after and border-radius to create the semicircle.
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #000;
height: 110px;
}
.header:after {
content: '';
background-color: red;
position: absolute;
display: block;
width: 100px;
top: 110px;
left: 50%;
margin-left: -50px;
height: 50px;
border-radius: 0 0 50px 50px;
}
Demo: http://jsfiddle.net/bU3QS/2/
<div class="header">
<div class="circle">
</div>
</div>
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #000;
height: 110px;
}
.circle {
height: 100px;
width: 100px;
border-radius: 100px;
background-color: black;
margin: auto;
position: relative;
top:45px;
}
in action: http://jsfiddle.net/NickWilde/ngcce/