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

Question

我的页面中有 menu/submenu 个元素类似于

<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>

看起来有点像

我想要的是子菜单覆盖文档的 %100，并从文档的 right:0 开始，例如

我已经设法通过 100vw 将宽度设置为文档的 100%，但我不知道如何设置正确的位置以便它从文档的 0 点开始绘制？

Answer 1

.category { background: red; height: 50px; width:25%; display: inline-block; }
.subcategory { position:absolute; top: 60px; right:0px; width:100%; background:blue;height: 100px; }

<div class="category">
  <div class="subcategory"></div>
</div>
<div class="category">
  <div class="subcategory"></div>
</div>
<div class="category">
  <div class="subcategory"></div>
</div>

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

positioning absolute element to the rigth:0 of document

html

css

positioning