I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

I have inserted a code snippet that highlights my issue. I am attempting to ensure that the .navigation element remains fixed at the top of the colored divs, however, when using 'right: 0;', the .navigation element seems to shift to the right side of the body instead of staying within its container. What could be causing this unexpected behavior?

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.75);
}

body {
  background-color: #f1f1f1;
  font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
  line-height: 1.8rem;
}

.wrapper {
  width: 70%;
  margin: 0 auto;
}

.container {
  position: relative;
}

.navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 0;
}

.navigation div {
  padding: 20px;
  font-weight: 600;
  font-size: 1.3em;
}

section {
  height: 100vh;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: green;
}
<main class='container wrapper'>
  <nav class='navigation'>
    <div>
      About
    </div>
    <div>
      Projects
    </div>
    <div>
      Contact
    </div>
  </nav>

  <section class='about one'>

  </section>

  <section class='projects two'>
    <div class="">
      <a href="#">Test1</a>
    </div>
    <div class="">
      <a href="#">Test2</a>
    </div>
    <div class="">
      <a href="#">Test3</a>
    </div>
  </section>

  <section class='contact three'>

  </section>
</main>

htmlcss

Answer №1

The fixed position is always in relation to the viewport. One alternative you can explore is using the sticky position along with a combination of float:right; and top:0;, but it's worth noting that this workaround may not be compatible with Internet Explorer.

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.75);
}

body {
  background-color: #f1f1f1;
  font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
  line-height: 1.8rem;
}

.wrapper {
  width: 70%;
  margin: 0 auto;
}

.container {
  position: relative;
}

.navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* modified part: */
  position: sticky;
  float: right;
  top: 0;
}

.navigation div {
  padding: 20px;
  font-weight: 600;
  font-size: 1.3em;
}

section {
  height: 100vh;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: green;
}
<main class='container wrapper'>
  <nav class='navigation'>
    <div>
      About
    </div>
    <div>
      Projects
    </div>
    <div>
      Contact
    </div>
  </nav>

  <section class='about one'>

  </section>

  <section class='projects two'>
    <div class="">
      <a href="#">Test1</a>
    </div>
    <div class="">
      <a href="#">Test2</a>
    </div>
    <div class="">
      <a href="#">Test3</a>
    </div>
  </section>

  <section class='contact three'>

  </section>
</main>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

javascriptcssreactjsnext.js

Is it possible for JavaScript to only work within the <script> tags and not in a separate .js

I'm facing a puzzling issue with my JavaScript code. It runs fine when placed directly within <script>...code...</script> tags, but refuses to work when linked from an external file like this: <SCRIPT SRC="http://website.com/download/o ...

javascriptjqueryhtml

Show the form for user input

I have an HTML code for a form that requires input. Once the 'OK' button is clicked, the values are sent to a PHP script using $_POST. Is it possible to display the same form again if the input format is incorrect, but do so only within my PHP sc ...

phphtml

Steps to create a hover effect that alters the appearance of another chosen "element"

For instance, I have two classes named A and B. I want to be able to change the appearance of B when I hover over it, such as its color or size. I am unsure if this can be achieved using CSS and the onmouseover event. I am including a snippet of code that ...

javascriptjquerycssjqgrid

What methods can I employ to utilize the name attribute for POST requests instead of the ID attribute in TinyMCE?

My inline TinyMCE form sends content to qry.php with the key "edit_me". I prefer the default behavior of sending content using the name attribute instead. <script type="text/javascript"> tinymce.init({ selector: '#edit_me', ...

phpjqueryhtmlajaxtinymce

Tips for dynamically retrieving a CSS file for an HTML page

With multiple html pages containing the same navbar, I made the decision to place the navbar in its own file called navbar.html and use ajax with jquery.get() to dynamically load it onto each page. This prevents redundant code across all pages. Currently, ...

htmlcssajax

How do I create a clean HTML file when using the email editor with TinyMCE?

I was able to develop my own email editor, inspired by this particular example. To enhance user experience, I included a download button at the end of the file so that users can easily retrieve their edited content. The issue I'm facing is that tinym ...

javascripthtmljquerytinymce

Customize specific styles for individual divs one at a time (without the use of jQuery)

Can you assist me with this issue? I am trying to display the <span class="badge badge-light"><i class="fa fa-check-circle"></i></span> tag (initially set to "visibility: hidden") when clicking on a div with the class "role-box". He ...

javascripthtmlangular

Slide in the Toggle Effect to Your Navigation Menu

Seeking help with enhancing my jQuery dropdown menu to include a slide down toggle effect similar to this example: http://jsfiddle.net/LaSsr/188/. Any assistance in applying this slide effect to the following JSfiddle would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcss

Utilizing HTML list elements in conjunction with a switch statement, and connecting the list directly to a database for

Hey there, I'm interested in learning how to access HTML elements and use them within switch statements. <div id="hori"> <ul> <li><a href="#">Aerospace</a></li> <li><a href="#">Automotive</a>< ...

htmljspmenuswitch-statement

Adding a command to open a new browser tab using JavaScript code can easily be accomplished by following these steps. By using Terminal, you can quickly and efficiently implement this feature

I'm new to coding and trying to create a terminal simulation. You can check out my code here: https://codepen.io/isdampe/pen/YpgOYr. Command: var coreCmds = { "clear": clear }; Answer (to clear the screen): function clear(argv, argc ...

javascripthtmlcss

How to Show an Image in a Search Bar Using HTML

As I put the finishing touches on this table, I decided to add a search function to it. However, I encountered an issue with the search bar design. I wanted to incorporate a search icon png file as the background image, similar to the example showcased on ...

htmlcss

Incorporate a new style into several previous slides using the Slick carousel feature

I'm attempting to utilize the Slick carousel to create a timeline. My goal is for the previous slides to remain colored as you progress through the timeline, and turn grey when you go back. I've tried using onAfterChange and onBeforeChange, but I ...

javascriptcssslick.js

The content on the page is not visible when viewing on an Android device in

After spending a considerable amount of time browsing StackOverFlow for coding solutions, I have come across a problem that I can't seem to find an answer for. Yesterday, I made some changes to the media queries on my site in order to incorporate a dr ...

jquerycssmedia-queries

Verifying the current password and updating the hashed password

I have been struggling with creating a PHP script for updating user hashed passwords. Unfortunately, the script is not functioning as expected and no error messages are being displayed. Every time, it only shows "Your old password is incorrect" message. I ...

phphtmlmysqli

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

htmlcssreactjsfrontendtailwind-css

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

javascriptjqueryhtmlcsstwitter-bootstrap

Attempting to use jQuery AJAX to submit data without navigating away from the current webpage

Trying to implement the solution provided in this post where I am trying to send data to a PHP page and trigger an action, but unfortunately, it seems to just refresh the page without any visible outcome. Even after checking the network tab in the element ...

javascriptphpjqueryhtmlajax

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

I'm struggling with my code, particularly the form section. Here is the HTML code snippet: <form action="index.php/homepage/deleteSelected" method="POST"> <input type="submit" value="Delete Selected"> ...

phphtmlcssajax

Generating various fields within a single row

I am in the process of creating a dynamic form that should generate two new fields in the same line when the user clicks on the plus icon. Currently, the code I have only creates a single field. I attempted to duplicate the code within the function, but i ...

javascripthtml