html - 相对定位元素内的绝对定位元素。如何获得宽度和高度?

标签 html css

我意识到,当我将一个绝对定位元素放入一个相对定位元素时,如果我不手动设置,最后一个元素不会获得第一个元素的宽度和高度。例如:

<!DOCTYPE html>
<html>

<head>
  <style>
    .box {
      width: 10vw;
      height: 10vw;
      background-color: yellow;
      border: solid black;
      display: block
    }
    
    .cont {
      position: relative;
      display: block;
    }
    
    .cont>.box {
      position: absolute;
      display: block;
    }
  </style>
</head>

<body>

  <div class="box">1</div>
  <div class="cont">
    <div class="box">2</div>
  </div>
  <div class="box">3</div>
</body>

</html>

在这个例子中,所有 3 个框都出现了,但是第三个和第二个是重叠的。有没有一种方法可以使用纯 CSS 自动将绝对定位元素的参数设置为相对元素的参数?

最佳答案

要使一个对象的宽度等于另一个对象的宽度,请使用以下代码。

<script>
element.style.width = element.offsetWidth + "px"
<script>

这是javascript。

关于html - 相对定位元素内的绝对定位元素。如何获得宽度和高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49153244/

相关文章:

php - 直接将 CSV 文件下载到用户下载文件夹

java - 使用 xpath 查找元素

Javascript 浏览器通知不起作用

jquery - 使用按钮更改 div 内容

css - 仅当容器内有文本时才显示容器

javascript - 用 jQuery 替换图像

javascript - 摆脱页面上的边框?

html - 如果没有更多空间,将文本换行到下一行

javascript - 无法使用 JQuery 显示模态框

html - Internet Explorer 无法显示元素