Help understanding space occupied by positioned page block elements

HTML-CSS
1

Working on the module, " Applied Visual Design: Lock an Element to its Parent with Absolute Positioning." In this particular case, a positioned search form in a positioned ‘section’ block is causing unexpected results.

In the exercise provided, an h1 block occupies a position on the top of the page. After h1 comes a generic section block with relative positioning, containing a form with absolute positioning relative to the section. The form is positioned 50px away from the top and right side of the section .

I like visual reinforcement. In order to help visualize the size and shape of the section block, I fooled around with adding other elements to and around it. I tried adding paragraphs and div elements before, after, and to the section block. Things that were added before the section appeared above it and ‘pushed’ the section down lower on the page, as expected. However, things that were added after the section ALSO appeared above it, and did not affect the placement of the section.

  1. Can you show me where on my page the ‘section’ block exists? Since the form is in an absolute position 50px from the top of the section, I expect that it could exist ‘outside’ of a box. Am I remotely close? Is it a box with no size (more like a line)?

  2. Why would a paragraph or other block that was placed AFTER the section show up exactly in the place it would occupy if the section did not exist? In my picture “Paragraph after…” is placed exactly where a paragraph would show up if ‘section’ did not exist. But ‘section’ does exist. Again making me question whether it is a block with no size or a block that doesn’t really exist or something along those lines.

Thanks very much!

<style>
  #searchbar {
position: absolute;
top: 50px;
right: 50px;
   }   
  section {
    position: relative;  
    
  }
</style>
<body>
  <h1>Welcome!</h1>
  <p>Paragraph BEFORE form 'section'.</p>
   <div>
   <p>div before form section</p></div>
  <section>   
    <form id="searchbar">
      <label for="search">Search:</label>
      <input type="search" id="search" name="search">
      <input type="submit" name="submit" value="Go!">
       <form id="searchbar">
    </form>
  </section>
 <p>Paragraph after and outside form 'section'.</p>
 <div>
   <p>div1 after search bar</p></div>
   <div>
   <p>div2 after search bar</p></div>
   <div>
    
</body>

Here is a screen cap of code the results.

position-relative
position-relative3039×1593 397 KB

2

Do you have a link to a lesson?
Also we like real code here :3 can you post the code and not a screenshot

3

Thanks. Edited my post

4

For this I am not going to answer your question. Instead I want you to do the next:
Go to any random webpage online doesn’t matter which one.
Now if your onto windows click left mouse click and select inspect element.
You should then be able to see the border, margin and padding of the site as well as how they are build up.
If you are on another computer go Google how this work. Just search for how to inspect a webpage.
It should look somewhat like this

k
k555×615 29.2 KB

If you did it right you should see a panel with a margin a padding and a center.
Inspect the code close what do you see? What other elements are there.

5

Thanks, Kitty. I appreciate your reply. Inspecting pages is interesting, but not answering my questions about my example and this particular lesson. Hope somebody else is willing to chime in. :slight_smile:

6

The section element is collapsed, it has 0px height. The form element is taken out of normal document flow and does not affect the parent the way normally positioned elements would.

You can see this by first trying to give the form some height, the parent section element does not respond to this. Now give the section some height and you will see the other elements are in fact after the section.

1 Like
7

Thank you! That helped a lot. The fact that is is 0px high explains both of my questions.