CODEWITHSUNDEEP
htmlcssimage
Lakshay Sethi
Lakshay Sethi

Reputation: 39

Can you explain this possible anomaly in position:absolute property?

I have extracted the following from a project im working on : https://jsfiddle.net/x5oq3be6/

the image that i expect to be below is showing up above the the other image is this normal ?

in the code 

<div id="container">
<img id="window" src="https://i.imgur.com/pfMrcLo.png" alt="">
<img id="slider" src="https://i.imgur.com/bT9byOg.png" alt="">

</div>

and css

#container{
  position:relative;
}
#window,#slider{
  position:absolute;


}

#slider{
  top:-40px;
}

window is above the slider however window is showing up below the slider

what could be the reason?

thank you

Upvotes: 0

Views: 67

Answers (4)

Lakshay Sethi
Lakshay Sethi

Reputation: 39

what I make out of all the answers is the following

1.the browser reads the html document from top to bottom 2. as it reads the first coded element -> it places it on the screen first 3. then the next coded element is placed on top of the already placed element.

So if we want element A on top of element B: one way to do it is to code B first then code A. Because browser will read B and place it first the read A and place it on the top.

Upvotes: 0

Anuj Yadav
Anuj Yadav

Reputation: 1

position attribute in css only change the position of the element in x and y axis.If you want to change the position of element in z direction. use z-index, higher the value of z-index element come above the other element.

Upvotes: 0

Pablo
Pablo

Reputation: 1121

Change the order of loading or work with z-index

#window {
  z-index: 1;
}
#slider {
  z-index: 0;
}

Upvotes: 0

kongebra
kongebra

Reputation: 56

As Temani said, the browser reads the HTML top to bottom. Here is an example on your question on different order of the images. https://jsfiddle.net/L8ez6h5p/7/

Example:

<img id="window" src="https://i.imgur.com/pfMrcLo.png" alt="">
<img id="slider" src="https://i.imgur.com/bT9byOg.png" alt="">

Versus

<img id="slider" src="https://i.imgur.com/bT9byOg.png" alt="">
<img id="window" src="https://i.imgur.com/pfMrcLo.png" alt="">

Upvotes: 2

Related Questions