CODEWITHSUNDEEP
htmlcss
S Nash
S Nash

Reputation: 2499

Explanation of CSS AND HTML positioning

I have the following code:

.container {
  position: relative;
}

.topleft {
  position: absolute;
  top: 8px;
  left: 16px;
  font-size: 18px;
}

img {
  width: 100%;
  height: auto;
  opacity: 0.3;
}
<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>
<div class="container">
  <img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

This is copied from w3 schools. When running this code the text "Top Left" appears on the top left of IMAGE.

I need to understand why.

In this case div with the class of container is defined with the position of relative.

But Div with the class of Topleft is not inside IMG. It is inside the div with the class of container.

How come TOP LEFT text is positioned inside the image and not container Div. img is not a nearest positioned ancestor of TopLeft Div.

======================================

Thanks for comments. I think the core reason for this behavior was the following fact:

Absolute positioned elements are removed from the normal flow, and can overlap elements.

Upvotes: 2

Views: 451

Answers (3)

Friday Ameh
Friday Ameh

Reputation: 1684

I made some modifications by adding background and padding. the .topleft is actually position based on it containing parents its showing on the image because the image full the entire container.

.container {
    position: relative;
    background: tomato;
    height: 500px;
    padding: 30px;
}

.topleft {
    position: absolute;
    top: 8px;
    left: 16px;
    font-size: 18px;
     background: red;
}

img {
    width: 100%;
    height: auto;
    opacity: 0.3;
    background: black;

}
<body>

<h2>Image Text</h2>
<p>Add some text to an image in the top left corner:</p>

<div class="container">
  <img src="https://www.w3schools.com/css/trolltunga.jpg" alt="Norway" width="1000" height="300">
  <div class="topleft">Top Left</div>
</div>

</body>

Upvotes: 0

sassquad
sassquad

Reputation: 136

Whenever an element is positioned absolutely, it will lift itself out of the flow of the page. Any positioning attributes the element is given, will always be relative to it's parent, containing element.

In this instance, the parent element is the container div. This container has no positioning attributes, so will be positioned in the top left corner of the web page.

The topleft div is then positioned 8px from the top and 16px across from that same corner of the container div.

The image has no positioning, but happens to be shown in the top left corner of the parent container, underneath your positioned text.

You can see how absolutely positioned elements are always relative to their parent, by adding a margin value to the container div. For example, if you apply a margin of 50px, the container will be inset 50 pixels left and down from the top left of the page. The image and text will move accordingly.

Upvotes: 3

Antony
Antony

Reputation: 51

Your image tag is inline meaning it is not surrounded with a DIV block itself, therefore the image is part of the normal rendering and the text which is in a div is rightly in the top-left position: absolute. If you place separate div blocks around both lines you can specify whether positioning is absolute or float etc.

Upvotes: 0

Related Questions