This question already has answers here:
What is the point of CSS collapsing margins?
(1 answer)
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
Does anyone have an idea / explanation why this code affects the anchestors in it's vertical position?
This effect take place at least in chrome v75 and firefox v67 on linux.
Actually I would expect:
no affect on any parent-element of this two children
the first child on top aligned
second child followed by first child, fully visible
Codepen
.abs {
position: absolute;
width: 100%;
height: 100px;
background: red;
}
.static {
margin-top: 100px;
background: blue;
height: 200px;
width: 100%;
}
<header>
<div class="abs">Absolute or fixed should have no space to the top</div>
<div class="static"></div>
</header>
like that
.abs {
position: absolute;
width: 100%;
height: 100px;
background: red;
}
.static {
position:absolute;
top: 100px;
background: blue;
height: 200px;
width: 100%;
}
<header style="position:relative;">
<div class="abs">Absolute or fixed should have no space to the top</div>
<div class="static"></div>
</header>
Related
This question already has answers here:
Why does applying a CSS-Filter on the parent break the child positioning?
(4 answers)
Closed 2 years ago.
I have used will-change: transform on a parent element which has made scrolling smooth. But there are some child divs that don't have the static position anymore despite using position: fixed.
For the demonstration, I have created this basic webpage.
Note when I scroll down the red box, the yellow and green boxes go out of the viewport.
Code:
<style>
.app {
background: silver;
width: 100%;
height: 100%;
overflow-y: scroll;
z-index: 99;
will-change: transform;
}
.yellow-box-left .green-box-right {
width: 250px;
max-width: 250px;
}
.yellow-box-left {
position: fixed;
left: 0px;
top: 0px;
background: yellow;
}
.green-box-right {
position: fixed;
right: 0px;
top: 0px;
background: greenyellow;
}
.red-box-middle {
min-height: 100%;
margin-right: 250px;
margin-left: 250px;
position: relative;
background: indianred;
}
</style>
<html>
<div class="app">
<div class="yellow-box-left">
<!-- A list of words -->
</div>
<div class="red-box-middle">
<!-- A long list to make this scrollable -->
</div>
<div class="green-box-right">
<!-- A list of words -->
</div>
</div>
</html>
How can I keep these child divs in a fixed position?
For the example you provided, I managed to fix it by moving the will-change: transform to .red-box-middle.
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 would like an HTML element to show up behind a fixed header element in HTML. (Think dropdown menu under a fixed header.) Problem is, the div element (which is a child of the header element) always displays on top for all permutations of z-index and position I've tried. Please see this fiddle: http://jsfiddle.net/wm3dk82x/4/
Read comments in the jsfiddle code. I've permuted position and z-index, but can't get it to work. HTML and CSS snippets follow:
.header {
background-color: red;
position: fixed; /* must be fixed -- not an option to change this value */
top: 0;
left: 0;
width: 100%;
height: 50px;
text-align: center;
z-index: 5;
}
.divinheader {
background-color: yellow;
position: fixed; /* changed this for every option of position */
padding-top: 50px;
top: 0;
left: 90%;
width: 8%;
height: 20px;
text-align: center;
z-index: 2; /* less than the z-index of parent (2 < 5) */
}
<div class="header">fixed
<div class="divinheader">fixed1</div>
</div>
<div class="content">relative</div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
Change this:
<div class="header">fixed
<div class="divinheader">fixed1</div>
</div>
to this:
<div class="divinheader">fixed1</div>
<div class="header">fixed</div>
Fiddle: http://jsfiddle.net/0t471c3w/
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Why does this CSS margin-top style not work?
(14 answers)
Margin-Top push outer div down
(8 answers)
Closed 4 years ago.
I have a parent and child div, and when I add margin to the child div, it expands the parent div. How can I stop this from happening. You can see it happen here because the scroll bars appear.
I had a look at this similar question but I it doesn't seem like that answer does anything.
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
.container {
background-color: orange;
height: 100%;
width: 100%;
}
.child {
background-color: green;
height: 100%;
width: 200px;
margin: 10px;
}
<div class="container">
<div class="child"></div>
</div>
I would like this to be the final output. With the Orange div being 100% height
When you want the margins to collapse on the child div, give overflow: hidden to the parent div.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
.container {
background-color: orange;
height: 100%;
width: 100%;
overflow: hidden;
padding: 10px;
}
.child {
background-color: green;
height: 100%;
width: 200px;
}
<div class="container">
<div class="child"></div>
</div>
Now there's no scrollbars. I have used padding on the parent instead of margin. Please don't use calc() - not a good idea.
This question already has answers here:
Why is a div with "position: absolute" not by default relative to the document?
(3 answers)
How does the CSS position on a div affects position of sibling division?
(2 answers)
Closed 4 years ago.
I have 2 elements in the container, one relative and one absolute. I centered them both as well using margin: auto. The first element is relatively positioned, so it doesn't move, which I understand.
However, for the second element, it being absolutely positioned, shouldn't it move to the top-left corner of the container? I thought it removed the element from the flow of the document and moved relative to the parent element, which is .container , so I'm confused why it's being positioned under the first element.
I read the mdn docs for this...but perhaps I am not understanding the wording?
Essentially, I thought my second box would fit on the same row as the first box, just in the corner, on the left.
html, body {
height: 100%;
width: 100%;
}
.container {
height: 500px;
width: 500px;
border: 1px solid black;
position: relative;
}
.box1 {
height: 100px;
width: 100px;
background: blue;
position: relative;
margin: auto;
}
.box2 {
height: 100px;
width: 100px;
background: red;
position: absolute;
margin: auto;
}
<div class='container'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 4 years ago.
I have a parent div and two child divs. The second child div is variable height, but is absolutely positioned at the bottom of the parent div.
I want the first div to have a dynamic height based on the second div. I thought margin-bottom: 10px would specify the height of the first div to go up until 10px of the second div, but apparently this is not true.
Is there any workaround to get what I want?
HTML:
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >
</div>
</div>
CSS:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%;
}
JSFiddle:
https://jsfiddle.net/4tjqsron/2/
The margin-bottom is only telling the browser "don't let anything come within 10px of the bottom of me," as you found out.
I think this may be an excellent opportunity to use the calc() css function!
Try this:
.first {
background-color: green;
height: calc(100% - 110px);
}
This should leave a 10px space between your first and second child element.
Basically it is telling the browser that the first element is to take up 100% of its parent minus 110px.
Please see this for more info on the calc() function.
https://www.w3schools.com/cssref/func_calc.asp
I hope this helps!
EDIT: It just occurred to me that this only works if your height is set elsewhere. You may need to adjust your use of the 100% argument depending on your current parent height settings. Even if this is the case, the calc() function should still prove useful.
I am not get your point very clearly, here is my solution that div.second will always align on the bottom of div.parent vertically:
.parent {
height: 500px;
min-width: 500px;
position: relative;
background-color: red;
}
.first {
background-color: green;
margin-bottom: 10px;
}
.second {
/* height: 100px;
background-color: grey;
bottom: 0px;
box-sizing: border-box;
position: absolute;
width: 100%; */
max-height: 100%;
position: absolute;
top: auto;
bottom: 0;
}
<div class="parent">
<div class="first">
Hello
</div>
<div class="second" >No matter how many content in this div, it will always lie on the bottom of the parent div</div>
</div>