The appearance of new divs will not be seen beneath a fixed header

My webpage has a fixed header image in the first div, but I'm having trouble displaying subsequent divs/sections underneath it.

Despite my efforts, I can only see the header image and not the div positions below it. Any idea why this might be happening? Here is the JSFiddle link for reference: http://jsfiddle.net/s5atv9c3/

I've tried using various CSS properties such as:

top: 0px; //for the fixed element
margin-top: 100%; //for the sub-divs in the container
position: relative/absolute; //for the sub-divs in the container

Unfortunately, none of these solutions have worked for me. Any assistance or suggestions would be greatly appreciated.

htmlcsscss-position

Answer №1

If you define your .header block in this way, it will automatically adjust to be the same height as the screen.

To make .packages display directly below .header, simply set the top margin of .packages to 100%.

Because .header is fixed, ensure you specify the top offset and z-index as shown below:

.header {
    top: 0;
    z-index: -1;
}

Check out the demo here: http://jsfiddle.net/audetwebdesign/u8bt9wda/

Answer №2

One way to enhance your website is by implementing the following changes:

Specify a set height for the header section

.header {
    background: url("http://i.imgur.com/GZJVpxU.jpg") 
    height: 400px; //fixed height
    position: fixed;
    width: 100%;
    background-size:contain;
}

Incorporate padding equal to the header's height in the packages section

.packages{
   padding-top:400px;
}

Answer №3

The reason behind this behavior is the implementation of position:fixed; in the header. As a result, the next div is positioned starting from top:0; causing it to hide behind the first fixed div.

To ensure the visibility of the div, you should assign a top position to the second div and set its position to relative.

.packages {
    padding: 40px 0;
    background: #FFFFFF;
    width: 100%;
    position: relative;
    top: 500px;
}

Feel free to check out the live demonstration on Fiddle.

For more information, visit http://jsfiddle.net/s5atv9c3/2/

Answer №4

Give this a shot:

body {
    min-height: 100%;
    position: relative;
}

.container {
    min-height: 100%;
}

header {
    position: relative;
    height: 100%;
}

Check out the Fiddle

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

When a child element within a flex container has a relative position, the flex direction column will be overridden and

I'm having trouble with the code snippet below. For the .container, I have set display:flex; flex-direction: column; in order to position my previous and next arrows before and after the container items. However, the flex direction does not change ...

htmlcssflexbox

Tips on fetching data from a different webpage via ajax

Hello, I am new to programming. I am looking for a way to update the content of the current PHP page with content from another PHP page using AJAX without needing to refresh the page. The content that needs to be replaced is located within div elements. ...

phpjqueryhtmlajax

Chrome failing to import images, but Firefox has no issues with image importing

I'm not very familiar with JavaScript or jQuery, but I was attempting to troubleshoot a functionality that was previously created. The issue is that it works fine on Firefox, but it fails on Chrome. I am importing an image and then cropping the necess ...

javascripthtmlcsscanvas

Showcasing a dynamic image as a task is being completed within a JavaScript function

Is there a way to show a loading image while waiting for a JavaScript function to finish? <script type="text/javascript"> function create() { //Perform operation } </script> I am looking for a solution to display a loading image until ...

javascripthtml

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

Hello, I have encountered an issue with some PHP code from OpenCart that is automatically inserting <br /> and commas "," into the addresses of all my customers in the order notification emails. This unintended addition is creating problems with the ...

phphtmlopencart

Clearing text fields in jQuery by cloning them

I am attempting to duplicate the friend fields (name + email) when the "add another friend" button is clicked. However, the cloned fields end up including the text inside them, which is not desired! Does anyone have any suggestions or solutions? Here is t ...

jqueryhtmlformsclone

Is it possible to maintain a div consistently visible at the top while scrolling using CSS?

Is there a way to ensure that a div remains visible at the top of the page when scrolling without using jQuery, but only using CSS? ...

css

"Enhance Your Website with Custom jQuery Preloaders

Currently, I am facing a challenge while developing a website. Specifically, I am struggling with resolving the issue of a blank page being displayed. The website that I am working on involves functionality where swiping right triggers data insertion into ...

javascriptjqueryhtmljquery-mobilepreloader

Assistance needed with CSS selectors for implementing with selenium

<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div> In relation to selenium, what do the following terms refer to in the above code snippet? attribute element value text label I often fin ...

cssselenium

Python Webscraping using Selenium

I'm experiencing difficulties webscraping the list of DAOs from masari.io due to some errors that I encountered: DeprecationWarning: executable_path has been deprecated, please pass in a Service object driver = webdriver.Chrome(options=options, exec ...

pythonhtmlseleniumweb-scrapingdynamic

Sending data when button is clicked from Google Apps Script to sidebar

I have been attempting to pass a list that includes both the start cell and end cell of the active range. I want to then assign each value from this list to separate input fields. document.getElementById("btn-get-range").addEventListener('click&apo ...

javascripthtmlgoogle-apps-script

When an if statement is triggered by an overload of information, it initiates the start of a fresh

I am in need of creating an if statement that will trigger whenever images with IDs 0 to 3 (a total of 4 images) are loaded. This if statement should then generate a new row containing 0 to 3 images, and the same logic needs to be applied for words as well ...

javascripthtmljsonif-statementbootstrap-modal

Is there a way to create shared borders among Bootstrap columns?

Creating a Bootstrap container with two columns is my current task. The layout should display the columns side by side horizontally on larger screens, and stacked vertically on smaller screens with a 1px border surrounding each column, featuring rounded co ...

cssbootstrap-5screen

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Script is functioning as expected in Google Chrome, but is not responsive in IE and Mozilla browsers JavaScript code: <script src="jquery.min.js"></script> <script> function Run() { if(jQuery('#inputtext').val() == '0 ...

javascriptjqueryhtml

Error with Bootstrap 4 tabs and JavaScript AJAX implementation

I have implemented Bootstrap 4 tabs to showcase content fetched through an AJAX call. However, I encountered an issue upon completion of the call. The error message displayed is: Uncaught TypeError: $(...).tab is not a function The tabs are initially hi ...

javascriptjqueryhtmlajaxbootstrap-4

What is the best way to bring in an image when the resolution falls below 700 pixels?

Is there a way to import an image only if the screen resolution is greater than 700px? HTML: <picture> <img id="logo_mobile"> <!-- I have also tried this --> <source srcset="logomobile.jpg ...

htmlcss

Error: Unable to locate module '@material/core/Grid'

After cloning a repository that is built with MUI, I noticed that certain components were already imported and working seamlessly. These components include: import Card from '@mui/material/Card' import CardActions from '@mui/material/CardAct ...

htmlnpmmaterial-ui

Display of Navigation Bar in Angular is Not Proper

Currently diving into the world of Angular, I've encountered an issue with a material menu that isn't displaying correctly. The expected outcome based on my code should resemble this image: https://i.stack.imgur.com/z70Aq.png This snippet showc ...

javascripthtmlcssangular

Using jQuery to Convert CSV Data into an HTML Table

I've been exploring the incredible jquery.csvtotable.js plugin for converting csv files to html tables. One question that has been on my mind is how can I allow users to select a .csv file using a browse button that isn't a server-side control? ...

c#jqueryhtmlcsv

What's the best way to capture an element screenshot using JavaScript?

I'm working on developing a unique gradient selection application. One of the exciting features I would like to incorporate is the ability for users to save their chosen gradients as digital images (.jpg format) directly onto their computers. When the ...

javascripthtmlscreenshot