将绝对元素定位到rigth:0的文档

时间:2017-08-23 00:04:56

标签: html css positioning

我的页面中有菜单/子菜单元素  这就像

<div class="category">
  <div class="subcategory"></div>
</div>
<div class="category">
  <div class="subcategory"></div>
</div>
<div class="category">
  <div class="subcategory"></div>
</div>
<style>
.category { position:relative}
.subcateory { position:absolute   ; top: 40px ; right: 0px ; width: 100vw}
</style>
它看起来像 enter image description here

我想要的是子文章覆盖文档的%100并从右边开始:0文档类似 enter image description here

我已经设法将宽度设置为文件的100%100vw,但我知道如何设置正确的位置,以便它从文档的0点开始?

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
.category { background: red; height: 50px; width:25%; display: inline-block; }
.subcategory { position:absolute; top: 60px; right:0px; width:100%; background:blue;height: 100px; }
&#13;
<div class="category">
  <div class="subcategory"></div>
</div>
<div class="category">
  <div class="subcategory"></div>
</div>
<div class="category">
  <div class="subcategory"></div>
</div>
&#13;
&#13;
&#13;