I have created two div one is with class name .main and the second one is .container.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
position: absolute;
left: 5%;
right: 5%;
top: 25%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
When I am resizing the browser windows vertically the div with the class .container is changing its position. I want it to below the main div.
If you want your div positioned below the .main div (i.e. relative to the .main div), then you should refrain from using absolute positioning and use relative positioning instead. You can also not define a position property - by default it will be set to static, which also works:
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
left: 5%;
right: 5%;
top: 100%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
By default, the .main will be below .container. And position: absolute will remove the element completely out of the document flow.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
margin: 0 5%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
Try this.
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'm trying to create an area that contains all my absolutely positioned items. It works great until its sibling has an overflow attached to it. In the example below, when you start scrolling, the child div scrolls as if it's fixed. If you comment out the overflow: auto in the #app CSS, you'll get the desired behavior, but obviously the layout is incorrect. How can I fix this issue without moving the absolute div into the #app div?
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
If you want to use absolute positioning on .absolute you'll have to nest that code within #app and set it to position: relative;. The absolute positioning is referring to its nearest positioned ancestor, in this case, the body element, hence, why it is staying fixed. So you'll have to set #app to relative and it should work just fine.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
position: relative;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
.child {
top: 20px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">
Content 1
</div>
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
This should also work for you, see changes I made to HTML and CSS below.
#app {
height: 200px;
/* If I take this off, I get the desired behavior */
overflow: auto;
}
.content {
height: 300px;
width: 100%;
color: white;
background-color: darkblue;
}
.absolute {
position: relative;
top: 0;
left: 0;
}
.child {
top: 0px;
height: 20px;
position: absolute;
background-color: white;
width: 300px;
color: black;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<div id="app">
<div class="content">Content 1
<div class="absolute">
<div class="child">
Shouldn't be fixed when scrolling
</div>
</div>
</div>
</div>
I have an image, and a text-group that holds text.
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
I want the first word to always be positioned half on the image and half off the image like this.
The Problem: When I add more text into the text-group, it pushes the first word up.
Without adding a height to my text-group and without changing the bottom position of my text-group, how can I prevent my text from being pushed up when more text is added? In other words, how can I achieve the result below?
Full HTML and CSS
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute;
bottom: -15%;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
you might not need position. A negative top margin on the first h1 is plenty enough, no need then to mind img's height.
* {
margin: 0;
padding: 0;
}
.container {
/* position: relative; */ /*optionnal i believe */
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
/* position:absolute */ /*optionnal i believe */
}
.text-group h1:first-child {
margin-top: -0.7em;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
works the same with position:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute
}
.text-group h1:first-child {
margin-top: -0.7em;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
You have to position your position:absolute; from the top instead of the bottom. Because it will fix it from the top:
.text-group {
position: absolute;
top: 81%;
}
DEMO
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute;
top: 81%;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
Use:
top: 85%;
instead of:
bottom: 15%;
This is an easy fix
Just change the text-group class to this, changing the position to absolute, this makes the element positioned absolutely to its first positioned parent.
.text-group {
position: absolute;
top: 80%;
}
You can learn more about css positioning here, as it as been explained in full details https://medium.com/#leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
The row div has a top/bottom margin of 10px (margin: 10px 2px). However, the 10px is pushing the position of the main container. What I am trying to achieve is the row has a top/bottom margin inside the main-container. The margin is some how escaping and pushing the main-container.
Here is my code:
body {
padding: 0;
margin: 0;
}
.main-container {
position: relative;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
But if you run this code (below), without the row div. You can see the position of the main-container is different. This is the position the main-container should be in.
body {
padding: 0;
margin: 0;
}
.main-container {
position: relative;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
<div class="main-container">
</div>
How can I fix this?
You should change your position in the .main-container class to be position: absolute instead of position: relative.
Relative positioning will move the element with the flow of the page, whereas absolute positioning will essentially lock it in whatever position you set it to be in. Relative positioning is more for situations like your .row class, where you want it to depend on the positioning of the .main-container class. Absolute positioning should be used when you don't want other elements (specifically the parent element) to determine it's position.
body {
padding: 0;
margin: 0;
}
.main-container {
position: absolute;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
This article does a great job of explaining why you are having issues when both the parent and child have position: relative. If you take the position off of the parent entirely, you won't even notice a difference. Why? Because there's nothing to position it relative to. If you remove it from the .row class, you will find the same results. Relative positioning looks for an element that has a positioning other than static. In this case, there isn't one, so it's not really doing anything since all of the parents (body, html, etc) have position: static by default.
body {
padding: 0;
margin: 0;
}
.main-container {
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
body {
padding: 10px;
margin: 0;
}
.main-container {
position: relative;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
margin: 10px 0;
width: 175px;
height: 15px;
background-color: green;
}
Check it out in https://codepen.io/3rdsty4bl00d/pen/OGbENg?editors=1100#0
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>