How to ensure an absolutely positioned div spans the entire width of the screen

I am facing an issue with an absolutely positioned div that I want to stretch the full width of the screen using 100vw. However, the problem is that it aligns with its parent's starting point rather than the left side of the viewport. How can I make sure the element starts from left to right?

.main-navigation li {
    float: left;
    position: relative;
    height: 100%;
    display: flex;
}
.nav-dropdown {
    display: none;
    left: 0;
    top: 50px;
    position: absolute;
    background-color: #ebebeb;
    z-index: 2;
    height: 300px;
}
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120">
  <a class="nav-titles" href="http://localhost/wp/checkout/">Clothes</a>
  <div class="nav-dropdown"></div>
</li>

E: Here is the code snippet. The specific div in question is referred to as .nav-dropdown.

htmlcsscss-positionabsolute

Answer №1

If you want an element set to position:absolute to align properly, ensure that the parent has position:relative. By removing relative positioning from the li tag and applying it to the parent body tag, the desired behavior can be achieved! See the code snippet below for reference.

html, body{
  height:auto;
  margin:0px;
  width:100%;
  position: relative;
}
.main-navigation li {
    float: left;
    height: 100%;
    display: flex;
}
.nav-dropdown {
    /*display: none;*/
    left: 0;
    top: 50px;
    position: absolute;
    background-color: #ebebeb;
    z-index: 2;
    width:100%;
    height: 300px;
}
<li id="menu-item-120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-120">
  <a class="nav-titles" href="http://localhost/wp/checkout/">Clothes</a>
  <div class="nav-dropdown"></div>
</li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit... (Additional content removed for brevity)

Answer №2

Objects containing the attribute position: absolute are consistently placed against their immediate parent with a non-static position. If aiming to align them against the viewpoint, consider utilizing position: fixed instead.

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

How to load a URL into a div using jQuery and then update the div with new content?

I have a codeigniter view that I want to load into a div as an iframe using the following code: <script type='text/javascript'> $(document).ready(function (){ $('#divId').load('http://www.domain.oo/page.php?test=1); }); ...

phpjqueryhtml

The size of Bootstrap 3 columns adjusts dynamically based on the width of the window as the page is being

I am facing an issue with the layout of my bootstrap site when resizing the 3 horizontal columns based on the window size upon page load. Currently, I have a script that adjusts the height of each column to match the tallest one so they appear uniform whe ...

javascriptjqueryhtmlcsstwitter-bootstrap

Problems arising from the layout of the PrimeNG DataView component when used alongside Prime

I've been working with a PrimeNG DataView component that requires the use of PrimeFlex's flex grid CSS classes to set up the grid structure. One of their examples includes the following instructions: When in grid mode, the ng-template element ...

cssangulartypescriptprimengprimeflex

Guide to choosing the directory for Visual Studio's compilation of LESS files

I currently use VS 2012 on my Windows 7. It seems that by default, it compiles LESS files to CSS in the same directory as the LESS file when I save. However, I would prefer to have all my CSS files saved in a "css" directory located next to the "less" dir ...

asp.netcssvisual-studio-2012less

Javascript auto submission fails to execute following the completion of the printer script

As someone new to javascript, I have a question. I have a function called sendToQuickPrinter() that prints correctly, but after it finishes executing, I need to automatically submit a form to return to my "cart.php" page. I feel like I'm almost there, ...

javascriptphphtml

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

Unraveling the Mystery of CSS3 or JavaScript Sliders

I am currently developing a new website and I was intrigued by the slider effect on Apple and IBM's websites. For reference, you can check out how it works on sites like: and I noticed that the text and images slide in opposite directions, which se ...

javascripthtmlcssslider

Tips for including a numerical quantity to an existing value

I have developed a PHP code for adding products to a cart. The code is designed in such a way that when a user selects an existing product in the cart, the quantity of the existing product and the newly inputted quantity will be combined together. $se ...

phphtml

The hamburger menu is only functional for a single link

I've been developing a hamburger menu for my website, and it seems to be working fine until I click on a link. Once I navigate to a new page, the menu stops responding. To fix this issue, I attempted to use window.location.reload, which worked in Chro ...

javascriptphpjqueryhtmlcss

What is the best way to broadcast video content from Google Cloud Storage to iOS Safari?

Currently seeking a reliable method to serve videos through Google Cloud Storage that is compatible with all browsers, including Apple devices. I am facing challenges trying to play videos on my website (Vue front end, node.js backend) that are stored in ...

htmlnode.jsiphonevue.jsgoogle-cloud-storage

Surrounding a parent div with an additional div element

I'm struggling to summarize my predicament, but let me share some simplified code that highlights the issue (index.html): <html> <body> <div id="wrapper" class="divide"> <div id="top" class="divide"> ...

htmlcss

What is the priority of the asset pipeline's execution order?

What is the priority of asset pipeline? I am trying to replace a part of ace.css style with user.css.scss. The stylesheet file ace.css in the vendor folder should be overridden by user.css.scss. However, it did not work as expected even when I included ...

cssruby-on-railsasset-pipelineturbolinks

What is the best way to implement a new search input for my datatable while also enabling the searchHighlight feature?

I'm attempting to implement a search bar for my datatables. I need to hide the default search engine that comes with datatables, so I added a script that I found in a forum. However, when I try to run it in my code, it doesn't work and displays a ...

javascripthtmljquerydatatables

Triggering a targeted action upon the user's click on any HTML element

Currently, I am in the process of developing navigation buttons that trigger a dropdown sub-menu when clicked by utilizing checkbox inputs. Upon clicking the label, the input is checked, causing the menu to drop down, and when the label is clicked again, t ...

htmlcss

Adding CSS styles to an HTML page using JavaScript

Unfortunately, I do not have the ability to access the HTML directly as it is generated dynamically by a program. However, I do have access to the JS page that is linked to it. As an example, I am able to manipulate elements using JavaScript like so: ...

javascripthtmlcss

jQuery's capability to select multiple elements simultaneously appears to be malfunctioning

I am dynamically creating div elements with unique ids and adding span elements with specific CSS properties. $(".main").append("<div class=largeBox id=" + counter + "</div>"); $(".largeBox").append("<span class=mainTitle></span>"); ...

javascriptjquerycss

The label is not displaying the specified font-family in CSS

Below is a snippet of code that I am having trouble with: testing some content Additionally, here is the CSS code for it: label { font-family: "Andale Mono"; } The issue I am facing is that no matter which font style I try to apply, it does not seem to ...

csslabelfont-family

Updating the source content of an iframe in real time

Currently, I am working on a search result page. The scenario involves a login page redirecting to a homepage that consists of a dropdown menu, a textbox, a button, and an iframe displaying a table with user data (firstname, lastname, middlename). Upon sel ...

phpjavascripthtml

I'm looking to transfer my stringified object into the HTML body. How can I achieve

When sending an HTML file to a client using the res.write() method, I also need to include an object within the HTML. However, when I stringify the object and add it along with the HTML, the JSON object ends up outside of the HTML structure. I require the ...

javascripthtmlnode.jsjsonexpress

Is HTML-escaping necessary when implementing regex checks?

As I develop a web application that takes user input through HTML inputs and forwards it to my tomcat server for processing, my current workflow is as follows: Client JS -> collect HTML input -> perform regex validation -> if successful -> se ...

javascriptjavahtmljakarta-ee