Html Question posted in
Some basic documentation can be found here.

Html – Position: relative; right: 0; Doesn't seem to position although the parent is also relative

I’m trying to get the nav to position to the left as relative. I’ve been encountering this issue quite a lot and can’t get my head around it.

**HTML. **

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice Makes Perfect</title>
    <link
     rel="stylesheet" href="styles.css">
</head>
<body>

<div id="main">
    <div id="nav-border">
   <nav class="nav-bar">
    <ul>
        <li><a href="#">Home</li>
        <li><a href="#">Contact</li>
    </ul>
   </nav>
    </div>
</div>
   
</body>
</html>

**CSS
**

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#main {
    width: 100vw;
    height: 100vh;
    background-color: rgb(49, 49, 49);
}

nav-bar{
    color: white;
}

#nav-border {
    background-color: aqua;
    border-radius: 10px;
    padding: 5px;
}

nav-links {
    display: inline;
}

li {
    display:inline;
    position: relative;
    right: 0;
}

a {
    text-decoration: none;
}

a:link {
    color: black;
}

a:visited {
    color: black;
}

a:hover {
    color: skyblue;
}

I have attempted to create a class to contain the nav-bar to get it to align to the right.

I am also aware of how to do this via flex, absolute positioning however i cant get my mind around why it wont shift as relative.

Tags:

2

Answers


  1. 0

    You can use flexbox or grid layout to move the elements properly. these provide more control and is overall better for manual positioning

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#main {
    width: 100vw;
    height: 100vh;
    background-color: rgb(49, 49, 49);
}

.nav-bar {
    color: white;
}

#nav-border {
    background-color: aqua;
    border-radius: 10px;
    padding: 5px;
}

.nav-bar ul {
    display: flex;
    justify-content: flex-start; /* Aligns items to the left */
    list-style-type: none;
}

.nav-bar li {
    margin-right: 20px; /* Adds space between items */
}

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: skyblue;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice Makes Perfect</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="main">
        <div id="nav-border">
            <nav class="nav-bar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    position: relative means relative to itself. So

    position: relative;
right: 0;

    does nothing since it’s right edge is already at the far right of itself.

    The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

    For moving the element to the far right, using only positioning, you need to move the element relative to the parent. which would require position: absolute or similar.

    The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

    Other options to move the menu to the right include flexbox, text-align, css-grid and others.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search