Question 43421 in Html Question posted in
Some basic documentation can be found here.

Absolutely positioned div goes outside the borders of the parent – Html

The #third circle (with letter C) has top: 0 and should be located like this:

enter image description here

but is instead located like this:

enter image description here

JSFiddle: https://codepen.io/sabeser/pen/MWqxpzr

#wrapper {
  margin: 2em;
  height: 100px;
  min-height: 100px;
  width: 80%;
  min-width: 80%;
  background-color: darkblue;
}

#outside {
  margin: 2em;
  padding: 2em;
  background-color: green;
}

#body-wrapper {
  background-color: purple;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: silver;
  font-weight: bold;
}

.circle {
  background-color: red;
  border: 1px solid red;
  border-radius: 20em;
  display: inline;
  padding: 1em;
  position: relative;
}

#first {
  left: 5%;
  top: 5%;
}

#second {
  left: 80px;
  top: 20%;
}

#third {
  left: 30%;
  top: 0%;
}

#fourth {
  left: 40%;
  top: 80%;
}
<div id='body-wrapper'>
  <div id='wrapper'>
    <div class='circle' id='first'>A</div>
    <div class='circle' id='second'>B</div>
    <div class='circle' id='third'>C</div>
    <div class='circle' id='fourth'>D</div>
  </div>
  <div id='outside'>
    Outside text
  </div>
</div>

Why? How do I fix it?

Tags:

2

Answers


  1. 0

    It looks like the padding of the circle class (1em), is overlapping the top setting. Same for the 1px of border. Try accounting for this extra space by using something like:

    top: calc(0% + 1em + 1px);

    This will bring the circle in line with the edge of the blue div.

    However, if I understand what you’re trying to do properly, this should apply to all other circles and not just the 3rd, as they all have the same starting point.

    Login or Signup to reply.
  2. 0

    Taking a guess at what you want, set the wrapper’s position to relative and the inner elements’ position to absolute. Simply putting a top position on an element doesn’t make it absolutely positioned.

    You’ll probably need to adjust X-axis position values to get back to where things were.

    #wrapper {
  margin: 2em;
  height: 100px;
  min-height: 100px;
  width: 80%;
  min-width: 80%;
  background-color: darkblue;
  position: relative;
}

#outside {
  margin: 2em;
  padding: 2em;
  background-color: green;
}

#body-wrapper {
  background-color: purple;
  height: 100vh;
  min-height: 100vh;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: silver;
  font-weight: bold;
}

.circle {
  background-color: red;
  border: 1px solid red;
  border-radius: 20em;
  display: inline;
  padding: 1em;
  position: absolute;
}

#first {
  left: 5%;
  top: 5%;
}

#second {
  left: 80px;
  top: 20%;
}

#third {
  left: 30%;
  top: 0%;
}

#fourth {
  left: 40%;
  top: 80%;
}
    <div id='body-wrapper'>
  <div id='wrapper'>
    <div class='circle' id='first'>A</div>
    <div class='circle' id='second'>B</div>
    <div class='circle' id='third'>C</div>
    <div class='circle' id='fourth'>D</div>
  </div>
  <div id='outside'>
    Outside text
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search