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

Html – why isn't the absolute div not positioning to the fixed div?

I wanted to position the blue div relative to the red div.

I used the absolute position for the blue div but it didn’t move relative to the red div
this is the html code.

.mench {
  display: inline-block;
  height: 50px;
  width: 50px;
}
<div class="mench" style="position: fixed;top: 25px; left: 100px; background-color: red;"></div>
<div class="mench" style="position: absolute; left: 25px; background-color: blue;"></div>
Tags:

4

Answers


  1. 0 
    .mench {
  display: inline-block;
  height: 50px;
  width: 50px;
}

.red {
  background-color: green;
}
    <div class="mench" style="position: fixed; left: 100px; background-color: red;"></div>
<div class="mench" style="position: absolute; left: 25px; background-color: blue;"></div>
<div></div>
<div></div>
    Login or Signup to reply.
  2. 0

    Just remove ‘top: 25px’ from the red div

    Login or Signup to reply.
  3. 0 
    .mench {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
}

.mench::after {
  content: '';
  position: absolute;
  height: 50px;
  width: 50px;
  left: 75px; /* 50 + 25 = 75 */     
  background-color: blue;
}
    <div class="mench" style="position: fixed;top: 25px; left: 100px; background-color: red;"></div>

    I understand that you’re looking for clarification on what to do in case the answer I provided isn’t aligned with what you were expecting. To address this situation, here’s a clearer way to convey the information:

    If the response I’ve given doesn’t match the answer you had in mind, here’s what you can do: Please feel free to provide additional context or ask follow-up questions to guide me better. This will help me understand your perspective and provide you with a more accurate and satisfactory response. Your input is valuable, and I’m here to assist you to the best of my abilities.

    Login or Signup to reply.
  4. 0 
    .mench {
  display: inline-block;
  height: 50px;
  width: 50px;
}
    <div class="mench" style="position: fixed;top: 25px; left: 100px; background-color: red;">
  <div class="mench" style="position: absolute; left: 25px; background-color: blue;"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search