Here I have three elements which have position: absolute.
First and Second elements are OK, but the third element just doesn't appear.
body {
margin: 0;
padding: 0;
background: red;
position: relative;
}
#first {
border: solid green;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#second {
border: solid blue;
height: 200px;
padding: 100px;
position: absolute;
top: 0;
right: 0;
height: 50px;
}
#third {
position: absolute;
bottom: 0;
right: 0;
border: solid brown;
height: 100px;
padding: 100px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<section id="first"></section>
<section id="second"> </section>
<section id="third"></section>
</body>
</html>
When you use position: absolute on an element, it's removed from the normal flow of the document. When you do that to all of the direct children of an element, it ends up collapsing down and has a height of 0. If you use the web inspector you can confirm that your container, in this case, body, is 0px tall.
Setting the bottom property on #third causes it to align with the bottom of the body element, which is at the top of the viewport, which subsequently results in your element being rendered above the viewport where you can't see it.
If you set a fixed height or min-height on the body you can resolve this. A common pattern is to set the minimum height for the body to be the height of the viewport:
body {
min-height: 100vh;
}
Related
I have a header section that should wrap according to the header image. Every page has a different image so it must be responsive. However header section will not wrap with the image since it is absolutely positioned.
As you can see in the snippet the image has height: auto on it and just overflows outside of the parent. Is there anyway to make the parent wrap according to the image?
*, ::before, ::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#header::before, #hero.background-wrapper::before {
opacity: 0.2;
}
.background-wrapper::before {
content: '';
position: absolute;
background-color: #000;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .5;
z-index: 0;
}
#hero {
color: #fff;
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
padding-bottom: 60px;
position: relative;
font-family: 'Montserrat', sans-serif;
z-index: 1;
}
.hero-content {
max-width: 911px;
justify-content: flex-start;
text-align: left;
}
.hero-content {
padding: 0;
position: relative;
display: flex;
}
.hero-text {
margin-top: 100px;
max-width: 750px;
}
.background-wrapper picture {
position: absolute;
height: auto;
width: 100%;
inset: 0;
z-index: -1;
aspect-ratio: auto;
}
.background-wrapper picture img {
position: absolute;
height: auto;
width: 100%;
top: 0;
left: 0;
object-fit: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section id="hero" class="background-wrapper">
<div class="container hero-content">
<div class="hero-text">
<h1>Header</h1>
<h2>Header description</h2>
</div>
</div>
<picture class="hero-picture">
<source srcset="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399.jpg.webp" media="(min-width: 600px)">
<img src="http://localhost/wordpress/wp-content/webp-express/webp-images/uploads/2011/07/img_8399-450x300.jpg.webp" alt="landing image" decoding="“async”">
</picture>
</section>
</body>
</html>
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript by finding the height of the absolutely positioned children after they have rendered, and using that to set the height of the parent.
Alternatively, just use float: left/float:right and margins to get the same positioning effect while keeping the children in the document flow, you can then use overflow: hidden on the parent (or any other clearfix technique) to cause its height to expand to that of its children.
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>title</title>
<style>
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: absolute;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
For example in the html page above
Starting view
When scrolling to the right
I thought setting the div1 width to auto would match the div2 width but it does not work. Am I missing something? Do I need to auto update the width with javascript or can it be done with CSS only?
I want it cover the entire page even if the page gets resized.
Set position: relative on #div2, #div1 will then expand with it:
#div1 {
position: absolute;
top: 0px;
left: 0px;
min-width: 100%;
width: auto;
height: 100%;
background: blue;
}
#div2 {
position: relative;
top: 30%;
left: 0px;
width: 6000px;
height: 300px;
background: black;
}
<div id="div1">
<div id="div2"></div>
</div>
This question already has answers here:
Can I position an element fixed relative to parent? [duplicate]
(10 answers)
Closed 4 years ago.
I set the body position to relative, then I'm trying to position #first and #second elements relative to their parents, i.e. the body.
My question is why the #first element is not inside of the body when their positions are absolute/fixed?
body {
margin: 0;
padding: 0;
border: solid red;
position: relative;
}
#first {
position: fixed;
left: 0;
top: 200px;
border: solid green;
}
#second {
border: solid blue;
height: 200px;
padding: 100px;
position: absolute;
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<section id="first"></section>
<section id="second"> </section>
</body>
</html>
I think I see what the issue is. The above comment is correct in that it is easier to see the elements if you add a height and width.
Another thing to consider is the z-index context that is created when you set element positions.
Without setting the z-index, the first element is inside the body, but is behind the second element. Check out the link below.
https://jsfiddle.net/rollinglex/s1Ltf93n/2/
body {
margin: 0;
padding: 0;
border: 1px solid red;
position: relative;
height: 80%;
background-color: yellow;
z-index: 1;
}
#first {
position: absolute;
left: 0;
top: 200px;
height: 50px;
width: 50px;
border: 1px solid green;
background-color: green;
z-index: 100;
}
#second {
background-color: blue;
border: 1px solid blue;
height: 200px;
padding: 100px;
position: absolute;
z-index: 10;
}
Hope this helps!
The html page below contains a footer (position: fixed) and a "Sheet" (position: absolute).
My problem: How to prevent the bottom end of the Sheet to be hidden underneath the footer when I scroll down?
All my attempts with padding and margin failed ... (Please only html/css solutions.)
CSS
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red; }
HTML
<body>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
Give margin-bottom to sheet which is equal or grater than footer fix height;
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
}
Update
if you want to bring in front of all then add z-index property.
.Sheet {
margin-bottom: 35px; // equal or greater than footer height
z-index: 999; // use suitable maximum to bring in front all
}
The problem as I see it is the absolute position of the sheet, as absolute positions do not affect the height of the surroundung Element (in your case the body).
If possible try position: relative;. Then your margin can be counted in.
See https://jsfiddle.net/y3mg5zvb/
If it has to be absolute for any reason, you need a surrounding div with relative or static positioning that sets the height of the body.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
top: 0px;
right: 0px; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange;
padding: 0 10px 0 10px; }
.Sheet {
position: absolute;
top: 100px;
left: 25px;
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
max-height: 500px;
overflow: scroll;
top: 45px;
}
</style>
</head>
<div class="Background">
Background</div>
<div class="Sheet">
<div style="line-height: 200px">
Sheet<br>
Sheet<br>
Sheet<br></div>
Sheet<br>
Sheet</div>
<div class="Footer">
Footer </div>
</body>
</html>
This helps you?
Just don't use absolute position on .Sheet - there's no reason for it. Replace top and left with margin-top and margin-left and use a margin-bottom at least as high as the footer.
.Sheet {
margin-top: 100px;
margin-left: 25px;
margin-bottom: 30px; /* whatever value */
border-style: solid;
border-width: 2px;
padding: 20px;
background: red;
}
I think this is a perfect solution!!!
Solution by Joey, adapted by Nik
Set position absolute and margin
<!-- Solution by Joey, adapted by Nik -->
<!-- https://stackoverflow.com/questions/9350775/set-position-absolute-and-margin -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
body {
background: green; }
.Background {
text-align: right; }
.Footer {
position: fixed;
bottom: 0;
left: 0px;
height: 30px;
width: 100%;
background: orange; }
.Sheet {
position: absolute;
top: 200px;
left: 25px;
width: 50%;
background: red; }
.Sheet::after {
position: absolute;
content: "";
bottom: -80px;
height: 80px;
width: 1px; }
</style>
</head>
<body>
<div class="Background">
Background <br><br><br><br><br><br><br><br><br><br><br><br>Background</div>
<div class="Sheet">
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content<br>
Sheet content<br><br><br><br><br><br><br><br><br>Sheet content</div>
<div class="Footer">
Footer</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
main {
z-index: 999;
}
footer {
width: 100%;
min-height: 40px;
background-color: black;
}
footer p{
color: white;
}
<body>
<main>
<p>david</p>
</main>
<footer>
<p>logo</p>
</footer>
</body>
try playing around with z-index and some