The header and navigation bar are both set to stay in place, but unfortunately my div element is not displaying beneath

After setting both the Nav and Header to fixed, everything seems to start out well. I adjust the Nav margin-top so that it appears below the header, which works fine. However, things take a wrong turn when I try adjusting the div. The div ends up behind the fixed elements, and any attempt to adjust its top margin ends up moving everything together. How can I ensure that the div stays positioned below my header and nav bar?

I aim for the header, nav, and footer to remain in place while allowing only the div to be scrollable on my website. Setting both the header and nav to "position:fixed" should have done the trick, but unfortunately the non-"fixed" div overlaps with the fixed elements. Moving the div down by adjusting its "margin-top" causes all components to overlap improperly. How can I prevent this from happening?

html css

Answer №1

Your fixed elements are being displaced by your div because the top property is not set. If the top property is not defined, fixed elements will be positioned where they would naturally appear.

Replace the margin-top property with top to resolve this issue. Additionally, assign top:0px to any fixed element without a margin-top.

Here are two examples demonstrating this behavior:

Using margin-top: http://jsfiddle.net/HnZpN/ (issue)
Using top: http://jsfiddle.net/HnZpN/1/

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

Instructions for making text stand out on a background image and allowing it to move across the image

I'm looking to create a unique effect where a background image only shows through knockout text and then have that text animate from the top of the page to the bottom, revealing different parts of the background image as it moves. Although I know how ...

html css background-image

Can someone explain how I can use Selenium and Python to choose an available date using a calendar picker?

Having a class named .calendarCellOpen: table.calendario .calendarCellOpen input { } This is the CSS for the calendar: #calwrapper { min-height:230px; margin-top:10px; } #calendar{ float:left; marg ...

python html css selenium testing

Developing a jQuery Plugin to Generate an Interactive Dropdown Menu

I have a task to dynamically create a select list in which users can add options after the select list has been created. Check out my code snippet below: <script type="text/html" id="select_field"> <div class='row& ...

javascript html jquery

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

css reactjs material-ui

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

css mobile responsive-design media-queries

How can you apply color to {{expression}} text using AngularJS while also keeping all the text on a single line?

After writing the following code, I noticed that when I enter text into the input box, an output appears. However, I am now trying to find a way to color the output text while keeping it on the same line. <script src="https://ajax.googleapis.com/ajax ...

javascript html angularjs colors

The appearance of HTML dropdown select options is unappealing when viewed on iPhones

Looking for a simple alternative to the dropdown menu implementation on iPhones/iOS for a mobile website (not native app). Any suggestions using HTML/CSS/JavaScript? <!DOCTYPE html> <html> <head> <meta name="viewport" content="initi ...

javascript ios iphone css

Creating a login form using HTML, PHP, and MySQL: A step-by-step guide

UPDATE [13.10.16] After revisiting a previous question of mine on stackoverflow that has low reputation, I realized the reasons behind it and decided to update it to make it more relevant. When I initially asked this question, I was attempting to create ...

php html mysql

The form includes Bootstrap columns and a button, but there is noticeable wasted space within the

This is the form structure I am working with: <form method="GET" action="."> <div class="container-fluid pt-2 px-5 py-3"> <div class="row g-4"> <div class= ...

html css bootstrap-5

Launch Internet Explorer and input variable values (such as ScriptEngineMinorVersion)

I am looking to create a script that can open a file and inject values into it. Here is a basic example: Set WshShell = WScript.CreateObject("WScript.Shell") Return = WshShell.Run("iexplore.exe google.com", 1) However, I also need to modify some variab ...

javascript html vbscript internet-explorer-9

How can I adjust the size and width of the autofocus cursor inside an input box using Angular?

How can I modify the height and width of the cursor in an input field with auto focus? app.component.html <input class="subdisplay" [ngModel]="input | number" type="text" (keyup)="getValue(box.value)" name ...

html css angular

Height of Parent Div minus Margin Top equal to 100%

I am working on a layout that requires three divs with different heights and header sizes to be positioned 100% from the top of their parent, while taking into account the height of the headers. I could use jQuery to achieve this, but since it's a res ...

css calc

Displacement occurs when the input tag is eliminated

After some trial and error, I have discovered that removing the input tag from the label causes a change in the layout height. I am puzzled as to why this is happening. Could there be a special reason for this height alignment issue when an input tag is pl ...

html

What steps should I take to have a specific input prompt a certain action?

I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, ...

javascript html css

Customize the style based on the state using styled components

I am currently working with a function component that looks like this: const Navbar = ({setNav, nav}) => { const [justify, setJustify] = useState('space-around') //get localStorage const user = JSON.parse(localStorage.getItem('user& ...

css reactjs components state

Exploring AngularJS ng-repeat features for custom attribute settings

I'm currently facing a challenge in removing multiple repetitive divs by utilizing ng-repeat.  <div class="table-row"> <span class="glyphicon glyphicon-wrench"></span> <label>Chlo ...

javascript html angularjs

Implementing Bootstrap tooltips in content that can be scrolled

I need help with positioning two containers, which you can view in this FIDDLE. Both containers may contain a lot of content, so I have applied overflow: auto to both of them. This is the HTML structure: <div id="maincontainer"> <d ...

javascript jquery html css twitter-bootstrap

Display DIV when the page loads, and hide it when any radio button is clicked

If you're looking to create a page with hidden content that is revealed when specific radio buttons are clicked, you've come to the right place. The concept is simple - the page starts off blank, but upon selecting a radio button, one div is show ...

html hide startup

Utilizing an Image as a Link in the Background

I am working on a way to convert the CSS background image I have into a clickable link that can be referenced. Here is my CSS code: #wrapper { height: 100%; padding: 66px; } #ad_11 { background-image: url(images/index1.png); display: block; text-indent: ...

html css

My Horizontal Drop Down Menu won't stay still, how can I make it stop moving?

I'm a beginner with dropdown menus and I'm struggling to prevent my dropdown menu from expanding and pushing the main buttons. I think it's related to a positioning adjustment, but I can't pinpoint where or what it is. Here is the link ...

html css position

CSSer Q&A