0

I am trying to understand position concept of CSS but confused in absolute behavior. I have below structure.

When I am giving orange box position as absolute it is covering blue box. but when I remove position from orange box and give same to blue box it not covers orange box.

Why is it not covering?

.orange {
    background: orange;
    width: 100px;
    height: 100px;
    position: absolute;
}

.blue {
    background: blue;
    height: 100px;
    width: 100px;
}
<div class="container">
    <div class="orange"></div>
    <div class="blue"></div>
</div>
halfer
  • 19,824
  • 17
  • 99
  • 186
Passionate Coder
  • 7,154
  • 2
  • 19
  • 44
  • the sequence in html does matter. you can use z-index to controll the absolute element – kswang Feb 03 '21 at 06:38
  • but when i give absolute to orange box why blue one goes at first (below orange one) – Passionate Coder Feb 03 '21 at 06:40
  • As long as the orange div is over the blue div in your html structure so it will cover by default, but blue box is the 2nd item so it wont cover it's top item unless you use z-index to override default structure – Burham B. Soliman Feb 03 '21 at 06:43
  • @Mamta you need to give the blue box `top` when it has absolute position, then it would cover the orange one too – kswang Feb 03 '21 at 06:45
  • `position: absolute` will position it at the top left of the document or positioned parent, unless you include additional positing instructions such as `top: 10px` or `right: 25%` – tshimkus Feb 03 '21 at 06:54

0 Answers0