3

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?

Ross
  • 95
  • 1
  • 10

2 Answers2

0

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>
Nick
  • 1,392
  • 1
  • 13
  • 20
  • But why is `row` changing the position of `main-container`? The margin for the `row` is **inside** the `main-container`? How is it escaping the `main-container`? The margin of the `row` should be pushing rows position **inside** the confines of the `main-container` – Ross Apr 09 '19 at 01:28
  • I've added the explanation in for you. The `position: relative` on your `.main-container` class isn't doing anything. If you remove it entirely, you'll notice that nothing changes. It's not that the `margin` is "escaping" the `main-container`. It's just a misuse of `position: relative` resulting in no change in positioning. – Nick Apr 09 '19 at 01:46
  • @Ross check the duplicate, it's all about margin collapsing, no need to change the position. Changing the position is a *hack* in this case because there is no margin collapsing with position:absolute – Temani Afif Apr 09 '19 at 06:38
  • Not necessarily a "hack" but rather one of many possible solutions to fix the issue. All of the potential solutions to fix the issue can be found [here](https://www.sitepoint.com/collapsing-margins/). – Nick Apr 09 '19 at 16:10
0
<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

3rdsty4bl00d
  • 134
  • 10
  • Do you know why my code didn't work? I usually use this method all the time for positioning my inner div items, but for some reason, today it broke? – Ross Apr 09 '19 at 01:25
  • Using `position: absolute;` and `position: relative;` are problematic. That is the reason why I avoid using positions in css. Using flexbox with grid layout is much easier and less headache. – 3rdsty4bl00d Apr 09 '19 at 01:28
  • Is there a way to make this work using `position: relative;`? Because in my actual code, it messes up when I use grid. I've been using relative positioning. So everything of mine is sort of set up in a relative position – Ross Apr 09 '19 at 01:40
  • Check this new codepen code for your answer. I hope this works. https://codepen.io/3rdsty4bl00d/pen/OGbENg?editors=1100#0 – 3rdsty4bl00d Apr 09 '19 at 01:54
  • I'm not making fun of `position: absolute;` and `position: relative;`. They are really great, and very helpful tool while designing a webpage. I used to use these positions before I discovered `flex-box` and `grid layout`. After I got used to these layouts, I find positioning an element a bit too much. `Flex-box` and `Grid layout` has really made it easy to position an element. Please don't get me wrong. I am not saying it's bad for a code. @Nick – 3rdsty4bl00d Apr 09 '19 at 02:05