Questions surrounding the proper placement of a div within a relative element

Question

Questions surrounding the proper placement of a div within a relative element

I am currently learning how to create a web template without using tables, using HTML and CSS. I have some questions regarding the positioning of elements in my template.

Here is an image of how my final template should look:

Next, I need to position the horizontal main menu (the green one inside the header).

The tutorial suggests using absolute positioning to move the nav div containing the navigation menu to the right.

To achieve this, the tutorial recommends the following steps:

Set the position of the parent div as relative and specify the exact height of this parent div
Use absolute positioning for the nav div

Therefore, for my template, the HTML code should look something like this:

        <div id="header">    <!-- HEADER -->
            <div id="logo">     <!-- My Logo -->
                <h1><a href="#">My website</a></h1>
                <p id="slogan">
                    Welcome to my website
                </p>
            </div>

            <div id="nav">
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Portfolio</a>
                    </li>
                    <li>
                        <a href="#">Blog</a>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                </ul>
            </div>

And here is how the CSS code would look:

#header {
    background: #092F85;
    position: relative;
    height: 193px;          
}   

#nav{
    background: #93D459;
    position: absolute;
    top: 166px;
    right: 0;
}

I believe that understanding the positioning of the #nav div is straightforward (please correct me if I'm mistaken). It seems to be positioned absolutely on the right side and pushed down by 166px.

What confuses me is why the position of the parent div (#header) needs to be set as relative?

In general, when using position: absolute, the parent element is often specified as position: relative. But what does this mean exactly?

Thanks,

Andrea

css html xhtml

Answer 1

Answer №1

When applying the CSS rule position: absolute to an element, it will be positioned relative to the <body> element. However, if you use position: relative on a parent element further down the DOM hierarchy, the positioning will be based on that parent element instead. Let's take a look at the following example:

#positioned_element
{
    position:absolute;
    top: 10px;
}

<body>
    <div id="container">
        <div id="positioned_element">
        </div>
    </div>
</body>

In this scenario, there will be a gap of 10px between the beginning of the body element and the #positioned_element. However, if we modify the CSS like so:

#container
{
    position: relative;
}

#positioned_element
{
    position:absolute;
    top: 10px;
}

The 10px gap will now be between the top of the #container element rather than starting from the body element. This is because the absolutely positioned element is now relative to the #container element.

Additionally, it may be beneficial to consider using float: right in some cases as well.

Answer 2

When applying the CSS rule position: absolute to an element, it will be positioned relative to the <body> element. However, if you use position: relative on a parent element further down the DOM hierarchy, the positioning will be based on that parent element instead. Let's take a look at the following example:

#positioned_element
{
    position:absolute;
    top: 10px;
}

<body>
    <div id="container">
        <div id="positioned_element">
        </div>
    </div>
</body>

In this scenario, there will be a gap of 10px between the beginning of the body element and the #positioned_element. However, if we modify the CSS like so:

#container
{
    position: relative;
}

#positioned_element
{
    position:absolute;
    top: 10px;
}

The 10px gap will now be between the top of the #container element rather than starting from the body element. This is because the absolutely positioned element is now relative to the #container element.

Additionally, it may be beneficial to consider using float: right in some cases as well.

Answer 3

Answer №2

When an element, such as your #nav element, is given a position:absolute, it will be positioned in relation to its closest ancestor that has a position:absolute, position:relative, or position:fixed. If none of its ancestors have any of these position values, then it will be positioned relative to the initial containing block (refer to @Alohci’s comment below).

To ensure that #nav positions itself in relation to #header, you need to give #header a position:relative.

You could alternatively give #header a position:absolute or position:fixed, but this would cause it to no longer take up layout space in the document, resulting in subsequent elements moving up.

Answer 4

When an element, such as your #nav element, is given a position:absolute, it will be positioned in relation to its closest ancestor that has a position:absolute, position:relative, or position:fixed. If none of its ancestors have any of these position values, then it will be positioned relative to the initial containing block (refer to @Alohci’s comment below).

To ensure that #nav positions itself in relation to #header, you need to give #header a position:relative.

You could alternatively give #header a position:absolute or position:fixed, but this would cause it to no longer take up layout space in the document, resulting in subsequent elements moving up.

Answer 5

Answer №3

You may want to enhance your understanding of css and how to utilize position: absolute

This article provides a good explanation: http://example.com/css-tricks-absolute-positioning

(It's important to note that in Web Development, there are often multiple approaches to achieve the same result.)

Answer 6

You may want to enhance your understanding of css and how to utilize position: absolute

This article provides a good explanation: http://example.com/css-tricks-absolute-positioning

(It's important to note that in Web Development, there are often multiple approaches to achieve the same result.)

Questions surrounding the proper placement of a div within a relative element

Answer №1

Answer №2

Answer №3

Similar questions

Analyze HTML while maintaining the integrity of the initial content

What is the best way to adjust the size of my <div> to accommodate additional vertical content?

"Vanishing act: The mystery of the disappearing Bootstrap dropdown

Combining Text in HTML Using CSS to Create Layered Effects

Is it possible to conceal any spans that are in close proximity to the cursor when hovered over?

Eliminating a pattern with underscore.js or jquery - the complete guide

Select a specific date range from a form and export CSV file containing MySQL data within that range

creating hidden and displayed forms using php

Include an additional feature to an already established design

Incorporate a background image into input fields with Autofill on mobile browsers to override the default yellow background that obscures them

Having trouble incorporating autocomplete search results into an HTML table using Jquery, Ajax, and JSP

What is the best way to align an Icon in the navbar-toggler of Bootstrap 5?

Issues arise when attempting to create smooth animations with 100% transform translate across different web browsers

What is the best way to test the output of HTML code in a unit test scenario

Perform a function dynamically once a specific textfield is filled and continuously while filling another textfield

Alter the navigation background when moving between sections on a one-page website

Matching Javascript Variables to CSS Styles

php - assign image to picture through file location

The implementation of jQuery within an included HTML file may not function properly

The issue of conflicting stylesheets is causing alignment and height discrepancies when using multiple icons