Making a div absolute to specific div

user_10342050 0
Viewed 2153

Is it possible to make a div absolute to a specific relative div rather than just the parent?

For example. I have a div that's contained inside of a row. But, I want it to be absolute in the section rather than the row. Both divs are positioned relative because of a WordPress themes styling. If I use position absolute it will just make it absolute to the row.

How can I get around this issue?

.section {
  width: 100%;
  height: 100%;
  position: relative;
  background: #f5f5f5;
}

.row {
  width: 80%;
  height: 100%;
  position: relative;
  background: #000000;
  margin: 0 auto;
}

.content {
  width: 200px;
  height: 200px;
  background: pink;
  position: absolute;
  right: 0;
  top: 0;
}
<div class="section">
  <div class="row">
    <div class="content">
    </div>
  </div>
</div>

css-position css html
2 Answers

This is not how positioning works. A div or any other element is relevant to its parent regarding its positioning. In case you want to position an element inside the section that you have, it's better to construct your code as follows:

<div class="section">
  <div class="absoluteDiv">
  </div>
  <div class="row">
  </div>
</div>

You could find some more examples here

Hope it helps, Konstantinos.

user_54272360

Although you can not make a div absolute to a specific div, one way to get the results you are looking for is to add overflow:visible; to the row and left:100%; to content container. I changed the section height to 300px for demonstration purposes but it will behave the same with 100%.

.section {
  width: 100%;
  height: 300px;
  position: relative;
  background: #f5f5f5;
}

.row {
  width: 80%;
  height: 100%;
  position: relative;
  background: #000000;
  margin: 0 auto;
  overflow:visible;
}

.content {
  width: 200px;
  height: 200px;
  background: pink;
  position: absolute;
  left: 100%;
  top: 0;
}
<div class="section">
  <div class="row">
    <div class="content">
    </div>
  </div>
</div>

user_33424800
Related