i have two divs, i want to put the child on top of the parent top, i was trying but the child div got stuck outside, what is the wrong?
.content {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: column;
height: 200px;
min-height: 140px;
min-width: 140px;
border: 1px solid;
}
.topcorner {
width: 42px;
height: 42px;
background: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
<div class="content">
<div class="topcorner">top</div>
</div>
Parent element needs to have position: relative.
Add position: relative to the parent class .content to make the child div inside the parent div.
.content {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: column;
height: 200px;
min-height: 140px;
min-width: 140px;
border: 1px solid;
position: relative; //Add this line
}
.topcorner {
width: 42px;
height: 42px;
background: red;
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
<div class="content">
<div class="topcorner">top</div>
</div>
Related
For a picture preview I want to put 2 invisble divs (red/blue in the picture) in front of a picture for next/previous image functionality.
I would like to have the div ("pictureContainer"/ green bordered zone) to automatically take over the dimension of the containing picture but I can't find a PURE CSS solution without setting the width and the height manually.
.container {
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
/* I don't want to set width and hight manuyally.
The container should have the size if the contained image. */
height: 50%;
width:300px;
position: relative;
margin: auto;
border: 3px solid green;
}
.leftSide {
background-color: blue;
float: left;
height: 100%;
width: 50%;
opacity: 80%;
}
.rightSide {
background-color: red;
float: right;
height: 100%;
width: 50%;
opacity: 80%;
}
.picture {
position: absolute;
top: 0;
left: 0;
margin: auto;
z-index: -1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
Also the container should be horizontally aligned.
Note: The full screen white div with the black border is used to close the picture preview.
You should change so the divs have absolut: position, let the image have it's natural size, container should be display: inline-block;
.container {
display: flex;
align-items: center;
justify-content: center;
position: fixed;
width: 100%;
height: 100%;
border: 3px solid black;
}
.pictureContainer {
position: relative;
display: inline-block;
margin: 0 auto;
border: 3px solid green;
}
.picture {
display: block;
}
.leftSide {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background-color: blue;
width: 50%;
opacity: 80%;
z-index: 1;
}
.rightSide {
position: absolute;
top: 0;
bottom: 0;
right: 0;
background-color: red;
height: 100%;
width: 50%;
opacity: 80%;
z-index: 1;
}
<div class="container">
<div class="pictureContainer">
<div class="leftSide"></div>
<img class="picture" src="https://www.9skips.com/wp-content/uploads/2018/01/anger-300x300.jpg">
<div class="rightSide"></div>
</div>
</div>
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
I'm trying to make a popup that has an expanded area that appears from under it. The width of the popup is variable, so the expanded area must be a child of the popup element in order to always appear in the correct position, so it's z-index should be -1. The white button should move to the right as it toggles the expansion, so it should be a child of the expanded area, but that way it can't appear over the main popup, since its parent has a z-index of -1.
Ideally it should look something like this: https://cdn.discordapp.com/attachments/496805607454670888/558592164452499456/unknown.png
.container {
display: flex;
align-items: center;
justify-content: center;
}
.popup {
position: relative;
background: lightgray;
}
.popup-content {
width: 100px;
height: 100px;
}
.popup-expanded-container {
position: absolute;
top: 10px;
bottom: 10px;
left: calc(100% - 30px);
background-color: darkgray;
z-index: -1;
padding: 10px;
padding-left: 40px;
padding-top: 40px;
}
.popup-expanded-content {
width: 0px;
}
.expanded-toggle-btn {
position: absolute;
top: 5px;
right: 5px;
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
}
<div class="container">
<div class="popup">
<div class="popup-content"></div>
<div class="popup-expanded-container">
<div class="expanded-toggle-btn"></div>
<div class="popup-expanded-content">
</div>
</div>
</div>
</div>
Not The Same but you can get that result easly by doing this
.container {
display: flex;
align-items: center;
justify-content: center;
}
.popup {
position: relative;
background: lightgray;
}
.popup-content {
width: 100px;
height: 100px;
}
.popup-expanded-container {
position: absolute;
top: 10px;
bottom: 10px;
left: calc(100% - 30px);
background-color: darkgray;
z-index: -1;
padding: 10px;
padding-left: 40px;
padding-top: 40px;
}
.popup-expanded-content {
width: 0px;
}
.expanded-toggle-btn {
position: absolute;
top: 15px;
left: calc(100% - 30px + 12px);
width: 30px;
height: 30px;
background-color: white;
border-radius: 50%;
border: 3px solid darkgrey;
}
<div class="container">
<div class="popup">
<div class="popup-content"></div>
<div class="expanded-toggle-btn"></div>
<div class="popup-expanded-container">
<div class="popup-expanded-content">
</div>
</div>
</div>
</div>
I'm trying to follow this tutorial:
https://css-tricks.com/full-browser-width-bars/#article-header-id-0
What I need, is my <header> element to be a max-width of 800px, centered in the middle of the page. Then inside that header bar, I will be having a #filtersBar div that will go across the whole body of the page (edge to edge). This is what my code comes out with so far:
Here is a fiddle:
https://jsfiddle.net/us2jsmLy/3/
html, body {
overflow-x: hidden;
}
header {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 1200px;
z-index: 250;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background:red;
justify-content: space-between;
}
#filtersBar {
position: relative;
background: green;
width: 100%;
max-width: 800px;
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
z-index: 1;
}
#filtersBarInner {
position: relative;
width: 100%;
max-width: 800px;
background-color: blue;
z-index: 2;
}
<header>
foo bar some contents
<div id="filtersBar">
<div id="filtersBarInner">
dddd
</div>
</div>
</header>
I must be missing something stupid :/
As I understand, you can use :before pseudo for the full background edge to edge and also apply margin:0 to body
Updated Fiddle
html,
body {
overflow-x: hidden;
margin: 0;
}
div#filtersBar:before {
content: "";
position: absolute;
background: green;
top: 0;
bottom: 0;
left: -1000px;
right: -1000px;
z-index: -1;
}
header {
position: relative;
width: 100%;
margin: 0 auto;
max-width: 800px;
z-index: 250;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
background: red;
justify-content: space-between;
}
#filtersBar {
position: relative;
background: green;
width: 100%;
max-width: 800px;
z-index: 1;
padding: 15px 0;
}
#filtersBarInner {
position: relative;
width: 100%;
max-width: 800px;
/*margin: 0 auto;*/
background-color: blue;
z-index: 2;
}
<header>
foo bar some contents
<div id="filtersBar">
<div id="filtersBarInner">
<p>
ddddd
</p>
<p>
ddddd
</p>
<p>
ddddd
</p>
<p>
ddddd
</p>
</div>
</div>
</header>
I am trying to produce this effect with CSS. I have tried creating a box with a triangle and then using negative margin to overlap it onto the circle, but cannot get it right.
Many thanks for any help.
fiddle
https://jsfiddle.net/Hastig/n3w0tztv/
Getting the circle to stay vertically centered and have the text container min-height the height of circle is tricky and is not worked out in this example. A cheap fix is adding align-items: center to .container at a breakpoint with #media.
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
background-color: white;
height: 100vh;
}
.container {
display: flex;
width: 100%;
padding: 10px;
overflow: hidden;
}
.left {
position: relative;
display: flex;
width: 150px;
height: 150px;
margin-top: -4px;
margin-bottom: -4px;
margin-right: -17px;
background-color: #ec847c;;
border-style: solid;
border-color: white;
border-width: 4px;
border-radius: 100%;
z-index: 10;
}
.right {
position: relative;
display: flex;
flex: 2;
font-size: 20px;
color: white;
background-color: #4ca132;
}
.square {
position: absolute;
left: 0;
width: 50px;
height: 50px;
background-color: white;
overflow: hidden;
}
.square-top { top: 0; }
.square-btm { bottom: 0; }
.square::before {
content: "";
position: absolute;
display: flex;
width: 100%;
height: 100%;
transform: rotate(45deg) scale(2);
background-color: #4ca132;
z-index: 1;
}
.square-top::before { top: 50%; left: 50%; }
.square-btm::before { bottom: 50%; left: 50%; }
.text {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px 20px 20px 40px;
}
<div class="container">
<div class="left">
</div>
<div class="right">
<div class="square square-top"></div>
<div class="square square-btm"></div>
<div class="text">
Roles play an extremely important part in family funtion.
</div>
</div>
</div>
I have a parent div, and inside there are multiple divs that I want centered vertically.
<div id="main">
<div id="picBox">
<img src="imageurl">
</div>
<div id="lines">
Line 1<br> Line2
</div>
<div id="other">
Right side text
</div>
</div>
The CSS I have set to
#main {
border: 1px solid #FF0000;
height: 100px;
width: 500px;
vertical-align: middle;
display: table-cell;
}
#picBox {
height: 90px;
width: 75px;
background-color: #000;
float: left;
position: relative;
margin-right: 3px;
display: inline-block;
}
#picBox img {
position: relative;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -15px;
display: inline-block;
}
#lines {
font-size: 20px;
float: left;
background-color: #999;
display: inline-block;
}
#other {
float: right;
margin-right: 3px;
background-color: #6666DD;
display: inline-block;
}
I can't seem to get the divs within the main div to center vertically, with the exception of the first 'picBox' div.
Is there a way to vertically center the other divs as well?
Here's my jfiddle example:
http://jsfiddle.net/3ffda7ua/2/
Do something like:
#main {
... //Keep your other rules
position: relative;
}
#main div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
And handle your other positioning with left: whatever.
JSFiddle example
why don't you use flex-box to align it, using a class like this one on the parent:
.flex-center-center{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}