This is my code:
<div class="parent">
<div class="child-1"> CHILDREN 1 </div>
<div class="child-2"> CHILDREN 2 </div>
<div class="child-3"> CHILDREN 3 </div>
</div>
CSS:
.parent {
position: relative;
height: 250px;
}
.child-1 {
position: absolute;
top: 0;
width: 100%;
}
.child-2 {
height: 100%;
}
.child-3 {
position: absolute;
bottom: 0;
width: 100%;
}
I set child-2 as 100% but didn't happen. So, how to make .child-2 height 100% and between child-1 and child-3?
Assuming I understood correctly what you want to do... This seems like a job for Captain FlexBox®.
.parent {
display: flex;
flex-direction: column;
width: 300px;
height: 200px;
background: Yellow;
}
.child-1 {
background: Red;
}
.child-2 {
flex-grow: 1;
background: Green;
}
.child-3 {
background: Blue;
}
<div class="parent">
<div class="child-1"> CHILDREN 1 </div>
<div class="child-2"> CHILDREN 2 </div>
<div class="child-3"> CHILDREN 3 </div>
</div>
The important parts are setting display: flex on the container, instructing the rendering engine to calculate by the flex rules, changing the direction to vertical with flex-direction: column and making only the middle child fill up all the remaining space with flex-grow: 1.
Maybe if you delete the position: absolute; from your .child you will get that you want, cause in your case you get the .child-2 on the top of .child-1 div.
Try this:
.parent {
position: relative;
height: 250px;
}
.child-1 {
top: 0;
width: 100%;
}
.child-2 {
height: 100%;
}
.child-3 {
bottom: 0;
width: 100%;
}
You can use display:table-cell property for this
Add your child-2 below css:
.child-2 {
height: 100%;
position: absolute;
top: 50%;
bottom: 50%;
}
And your child-3 class top 100%:
.child-3 {
position: absolute;
bottom: 0;
width: 100%;
top: 100%;
}
child-2 will become at the middle of the other two divs.
Related
I am trying to stretch a sticky element to size of the screen. I have the following HTML
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
color:white;
position: sticky;
width: 100px;
height: 100px;
background: black;
}
<div class="header">Header</div>
<div class="large">Content</div>
The problem is that this works but the element is not stretched. If I change width:100px to width:100vw the sticky to the left breaks. So it seems like I cannot specify relative width and use sticky to the left at the same time?
You can achieve this by adding a div around both elements and giving that div a display: inline-block;:
.container {
display: inline-block;
}
.large {
height: 200vw;
width: 200vw;
}
.header {
left: 0;
top: 0;
position: sticky;
width: 100vw;
height: 100px;
background: black;
}
<div class="container">
<div class="header"></div>
<div class="large"></div>
</div>
I have a parent div with padding, inside there are 2 children. I want for second child b to take the rest of the height of parent (minus div a). And if div a is not present, than take all height. (with same css!)
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
}
#parent:after {
padding-top: 56.25%;
display: block;
content: '';
}
.a {
position: relative;
height: 20px;
width: 100%;
background: red;
}
.b {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: blue;
overflow: hidden;
}
<div id="parent">
<div class="a">1 </div>
<div class="b">2 </div>
</div>
edit:
why was the question downvoted? What is wrong with the question? how do I ask it without being downvoted?
You can use view-height css unit for div b. Example with your code. If you remove div a you will notice that div b will take all the height.
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
}
#parent:after {
padding-top: 56.25%;
display: block;
content: '';
}
.a {
position: relative;
height: 20px;
width: 100%;
background: red;
}
.b {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: blue;
overflow: hidden;
}
<div id="parent">
<div class="a">1 </div>
<div class="b">2 </div>
</div>
The intended behaviour can be achieved with flex-box layouts, as demonstrated in the Code Snippet embedded below.
Solution Breakdown:
#parent - declare flex on containing parent element, as well as
flex-wrap so that nested elements can occupy the full-width of the
container, we want to maintain the row direction here.
.a - declare flex-basis on this nested element; which is
tantamount to declaring width: 100% - we want it to remain
full-width so that the following sibling element (.b) wraps to a
new row.
.b - declare the shorthand property flex: 1 1 to specify that
this element should occupy the full width and height of its
containing element but not exceed it. The flex1 property is a
shorthand for flex-shrink2,
flex-grow3, and flex-basis4
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
/* additional */
display: flex;
flex-wrap: wrap;
}
#parent:after {
padding-top: 56.25%;
display: block;
content: '';
}
.a {
position: relative;
height: 20px;
background: red;
/* additional */
flex-basis: 100%;
}
.b {
position: relative;
background: blue;
/* additional */
flex: 1 1;
}
<div id="parent">
<div class="a">1</div>
<div class="b">2</div>
</div>
<br>
<div id="parent">
<div class="b">2</div>
</div>
A note on flex-box:
Since flex-box has limited to no support for legacy browsers (like I.E) for full browser support and compatibility refer to either one of the aforementioned alternatives.
See browser compatibility:
caniuse.com
flex - CSS | MDN
Edit
Updated
#parent {
position: relative;
left: 0;
max-width: 500px;
max-height: 200px;
background: #333;
top: 0;
overflow: hidden;
/* additional */
display: flex;
flex-direction: column;
height: 200px; /* an absolute height value is required for relative flex-box heights */
}
/*#parent:after { kill the interloper
padding-top: 56.25%;
display: block;
content: '';
}*/
.a {
position: relative;
height: 20px;
background: red;
}
.b {
position: relative;
background: blue;
/* additional */
flex: 1 1;
}
<div id="parent">
<div class="a">1</div>
<div class="b">2</div>
</div>
<br>
<div id="parent">
<div class="b">2</div>
</div>
The updated snippet demonstrates an alternative solution with a column direction. The pseudo-element #parent:after has been removed as it negates any attempt to achieve the behaviour specified in your question (if this pseudo-element is required in any shape or form, consider updating your question to point this out with clear explanations as to its function and or role).
Is there anyway I can position my div content stuff to go below image.I don't want to give padding to wrap class as no one know how big the image would be so I need a solution where text goes below to image as mentioned in html structure.
.parent {
width: 500px;
background-color: red;
margin: 0 auto;
position: static;
}
.wrap {}
.child {
background-color: yellow;
position: absolute;
left: 0;
right: 0;
height: 100px;
top: 30px
}
div {
height: 400px;
}
body {
background-color: blue;
}
<div class="parent">
<div class="child"><img src="https://images.mapsofworld.com/around-the-world/Chinese-economy-faces-tough-times.jpg" /></div>
<div class="wrap">stuff</div>
</div>
Position wrap inside child
html, body { padding: 0; margin:0; }
.parent {
width: 500px;
background-color: red;
margin: 0 auto;
position: static;
}
.wrap {}
.child {
background-color: yellow;
position: absolute;
left: 0;
right: 0;
height: 100px;
top: 30px
}
div {
height: 400px;
}
body {
background-color: blue;
}
<div class="parent">
<div class="child"><img src="https://images.mapsofworld.com/around-the-world/Chinese-economy-faces-tough-times.jpg" />
<div class="wrap">stuff</div>
</div>
</div>
You could use Transform: Translate() to move it under, inside the parent <div>. I did this myself with a table and input fields inside a <div>
Why is the red div in front of the green div when I remove z-index from .wrapperRed?
It feels like z-index is inherited up the chain.
If I change the z-index of the green div to 6, it stays in front of the red one even after removing the line described in the first sentence.
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
z-index: 1; /* Why is the red div in front of the green one, if this z-index is deleted? */
}
.red {
position: absolute;
height: 100%;
width: 100%;
background-color: red;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="red"></div>
</div>
<div class="green"></div>
When you remove z-index from .wrapperRed, the element defaults to z-index: auto.
In this case, both .red and .green participate in the same stacking context because positioned elements do not create a stacking context when z-index is auto (reference).
Learn more about z-index and stacking contexts here: Basics of the CSS z-index property
Why is the .red div in front of the green div when I remove z-index
from .wrapperRed?
Because .red no longer has a parental z-index to constrain it.
ie.
Before: .red has a z-index of 5 within a parental z-index of 1.
After: .red has a global z-index of 5.
N.B. In both Before and After cases, .wrapperRed is always behind .green. But, when it is unconstrained, .red (which is 100% the width and height of .wrapperRed) appears in front of .green.
You can see this more easily if you give the parent and child divs different background colours and make the child div smaller than the parent.
Compare:
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
background-color: red;
z-index: 1;
}
.yellow {
position: absolute;
height: 75%;
width: 75%;
background-color: yellow;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="yellow">
</div>
</div>
<div class="green"></div>
with:
.wrapperRed {
height: 200px;
width: 200px;
position: absolute;
background-color: red;
}
.yellow {
position: absolute;
height: 75%;
width: 75%;
background-color: yellow;
z-index: 5;
}
.green {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
}
<div class="wrapperRed">
<div class="yellow">
</div>
</div>
<div class="green"></div>
I'm trying to create some static content using a div with position: fixed and then allow a solid div with a background-color to scroll over it and hide the static text below.
HTML:
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
CSS:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
But the yellow div just shows the text through from the fixed background.
Why is this?
By setting z-index: -1; in .static-background i get the desired behaviour, except that the link is no longer clickable and the text is not selectable.
How do I make the background of .overlay hide the fixed elements behind while still allowing interaction (until hidden)?
Fiddle here.
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Why can I see this through the yellow div?</p>
<p> this should be clickable
</p>
</div>
<div class="overlay"></div>
</div>
When you give the element .static-background a negative z-index, it is being placed behind the parent .container element, which is why the element is unclickable.
To work arond this, you need to give the parent element, .container, a z-index to establish a stacking context between the elements.
In this case, you can simply give it a z-index of 1.
Updated Example
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1; /* Added */
}
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.static-background {
position: fixed;
z-index: -1;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
}
<div class="container">
<div class="static-background">
<p>Some text</p>
<p>this should be clickable</p>
</div>
<div class="overlay"></div>
</div>
As an alternative, you could also just give the element .overlay a z-index of 1, and remove the z-indexs from the other elements. (example)
You might want to add some z-index to your elements:
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index: 99;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
position: relative;
z-index: 100;
}
Change your css to this...
.container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.static-background {
position: fixed;
z-index:4;
}
.overlay {
background-color: yellow;
height: 200%;
margin-top: 200px;
z-index:5;
position:relative;
}
Working JSFiddle http://jsfiddle.net/DivakarDass/mcdbopj6/3/