2017-10-07 54 views
-2

我有一个absolute定位的div,我将它设置为具有100vw的屏幕的全宽度,但问题是它开始于其父开始,而不是在左侧的视口。我怎样才能让元素从左到右开始?使绝对定位的div占据屏幕的全宽

.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:添加的代码。我谈论的div是.nav-dropdown

+0

'左:0;顶部:0;'? – Manav

+0

'top:0 left:0 right:0' –

+0

那些什么都不做。它只停留在其父元素的左侧,而不是在整个窗口的左侧。 – opportunityr

回答

0

一种解决方案将是,它被设置为position:absolute将寻找position:relative父,所以如果你从li标签删除相对定位,并将其移动到父body标签的元素,它会表现为你想要的!请参阅下面的代码片段。

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. Quisque ac aliquet enim. Mauris maximus et dui sit amet fermentum. Aliquam at pharetra enim. Donec porttitor aliquet augue, ac egestas felis. In nec semper purus. Pellentesque sagittis vulputate feugiat. Donec tempor metus a risus interdum, a volutpat purus ultrices. Aenean facilisis diam a nisi dignissim venenatis ac in ipsum. Cras laoreet lacus quis placerat vehicula. Sed finibus justo neque, nec sollicitudin orci rhoncus nec. Etiam at ornare nibh. Proin mollis nisl id odio tempor varius. 
 

 
Mauris vestibulum tortor et velit lacinia vulputate. Quisque vel tempor augue, at hendrerit tellus. Duis vehicula fringilla nunc, viverra aliquet metus sodales id. Phasellus turpis nisl, pharetra ac libero ac, eleifend interdum sapien. Mauris sit amet fermentum tortor, ut condimentum diam. In tincidunt semper consectetur. Duis id urna blandit, porttitor dolor in, pharetra justo. Proin congue fringilla ante vitae blandit. Mauris vel ultrices elit, ac faucibus nulla. Nam lorem diam, commodo id mauris vel, pellentesque posuere eros. Nullam sit amet metus ut purus condimentum posuere. 
 

 
Etiam tristique laoreet consectetur. Etiam et orci pellentesque, tristique lacus in, dictum urna. Curabitur venenatis, lacus id vehicula luctus, purus enim aliquam erat, non molestie justo tortor a leo. Sed hendrerit leo vel nisi congue vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla viverra ultricies accumsan. Mauris auctor massa at leo euismod maximus sed ac turpis. Nam id sapien orci. Quisque eu imperdiet neque. Fusce vel justo orci. Praesent mattis, orci sed imperdiet suscipit, sem sem dictum risus, nec auctor velit turpis at ex. Pellentesque luctus lorem at velit malesuada, id ultricies sem sollicitudin. Donec fermentum egestas nisi, ut blandit leo posuere blandit. In hac habitasse platea dictumst. Cras magna mauris, dignissim sed ligula in, feugiat feugiat lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 

 
Ut placerat ante arcu, nec lobortis mauris posuere tincidunt. Suspendisse facilisis quis metus id imperdiet. Etiam tempus congue viverra. Nullam in tincidunt erat. Pellentesque feugiat orci sagittis tristique hendrerit. Cras suscipit volutpat imperdiet. Sed ac nulla non nisi tristique aliquam. Nam egestas dolor in feugiat vestibulum. Phasellus in vestibulum diam. Mauris sit amet bibendum ipsum, non faucibus dolor. In suscipit scelerisque lacus non condimentum. Nulla eu viverra libero. Nam mi enim, vulputate at ornare finibus, vehicula at mi. Nulla finibus vel risus vitae tristique. Duis ut ultricies purus, ornare condimentum tellus. 
 

 
Aenean congue lacus lectus, ac luctus risus scelerisque vitae. Duis sed tempor felis. Donec fringilla aliquet purus. Sed ultricies mauris eu lectus facilisis sodales. Aliquam imperdiet efficitur lacinia. Aliquam tempor sollicitudin sem vitae blandit. Aenean facilisis efficitur finibus. Aenean scelerisque nisl ac lectus viverra, vel elementum nisl ornare. Nam diam erat, volutpat ac tortor id, viverra suscipit nulla. 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac aliquet enim. Mauris maximus et dui sit amet fermentum. Aliquam at pharetra enim. Donec porttitor aliquet augue, ac egestas felis. In nec semper purus. Pellentesque sagittis vulputate feugiat. Donec tempor metus a risus interdum, a volutpat purus ultrices. Aenean facilisis diam a nisi dignissim venenatis ac in ipsum. Cras laoreet lacus quis placerat vehicula. Sed finibus justo neque, nec sollicitudin orci rhoncus nec. Etiam at ornare nibh. Proin mollis nisl id odio tempor varius. 
 

 
Mauris vestibulum tortor et velit lacinia vulputate. Quisque vel tempor augue, at hendrerit tellus. Duis vehicula fringilla nunc, viverra aliquet metus sodales id. Phasellus turpis nisl, pharetra ac libero ac, eleifend interdum sapien. Mauris sit amet fermentum tortor, ut condimentum diam. In tincidunt semper consectetur. Duis id urna blandit, porttitor dolor in, pharetra justo. Proin congue fringilla ante vitae blandit. Mauris vel ultrices elit, ac faucibus nulla. Nam lorem diam, commodo id mauris vel, pellentesque posuere eros. Nullam sit amet metus ut purus condimentum posuere. 
 

 
Etiam tristique laoreet consectetur. Etiam et orci pellentesque, tristique lacus in, dictum urna. Curabitur venenatis, lacus id vehicula luctus, purus enim aliquam erat, non molestie justo tortor a leo. Sed hendrerit leo vel nisi congue vulputate. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla viverra ultricies accumsan. Mauris auctor massa at leo euismod maximus sed ac turpis. Nam id sapien orci. Quisque eu imperdiet neque. Fusce vel justo orci. Praesent mattis, orci sed imperdiet suscipit, sem sem dictum risus, nec auctor velit turpis at ex. Pellentesque luctus lorem at velit malesuada, id ultricies sem sollicitudin. Donec fermentum egestas nisi, ut blandit leo posuere blandit. In hac habitasse platea dictumst. Cras magna mauris, dignissim sed ligula in, feugiat feugiat lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 

 
Ut placerat ante arcu, nec lobortis mauris posuere tincidunt. Suspendisse facilisis quis metus id imperdiet. Etiam tempus congue viverra. Nullam in tincidunt erat. Pellentesque feugiat orci sagittis tristique hendrerit. Cras suscipit volutpat imperdiet. Sed ac nulla non nisi tristique aliquam. Nam egestas dolor in feugiat vestibulum. Phasellus in vestibulum diam. Mauris sit amet bibendum ipsum, non faucibus dolor. In suscipit scelerisque lacus non condimentum. Nulla eu viverra libero. Nam mi enim, vulputate at ornare finibus, vehicula at mi. Nulla finibus vel risus vitae tristique. Duis ut ultricies purus, ornare condimentum tellus. 
 

 
Aenean congue lacus lectus, ac luctus risus scelerisque vitae. Duis sed tempor felis. Donec fringilla aliquet purus. Sed ultricies mauris eu lectus facilisis sodales. Aliquam imperdiet efficitur lacinia. Aliquam tempor sollicitudin sem vitae blandit. Aenean facilisis efficitur finibus. Aenean scelerisque nisl ac lectus viverra, vel elementum nisl ornare. Nam diam erat, volutpat ac tortor id, viverra suscipit nulla.

0

带有position: absolute的元素总是与非静态位置的最靠近的父母对齐。如果您想对视口进行定位,请改用position: fixed

+0

我意识到,但我不能使用'position:fixed',因为我不希望它保持固定在滚动上。还有其他的选择吗? – opportunityr

+0

一个绝对定位的div会浮到窗口上,或者是第一个'position:relative' parent。你可能不得不寻找那个。您也可以使用负边距来调整偏移量。 – admcfajn

相关问题