如果绝对位置是相对于 HTML 的，那么为什么改变 HTML 的高度不会影响绝对定位元素的高度呢？答案

【问题标题】：If position absolute is relative to the HTML, then why does changing the height of HTML does not affect the height of the absolute positioned element?如果绝对位置是相对于 HTML 的，那么为什么改变 HTML 的高度不会影响绝对定位元素的高度呢？
【发布时间】：2020-11-18 14:31:06
【问题描述】：

* {
  margin:0;
  padding:0;
}

html {
  height: 700px;
  overflow: hidden;
  background-color: tan;  
}

body {
  background-color: rgb(107, 72, 7);
  height:500px;
  overflow: hidden;
}

ul {
  list-style-type: none;
  width: 12%;
  background-color: #f1f1f1;
  border: 1px solid;
  position: absolute;
  height:100%;
}

ul:hover {
  cursor:pointer;
}

li {
  display: block;
  padding:10px;
  border-bottom: 1px solid;
}


li:hover:not(.home) {
  background-color: #808080;
  color: white;
}

.home {
  background-color: green;
  color:white;
}

.main {
  margin-left: 13%; 
  padding:10px;
}

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" initial-scale="1.0">
    <html lang="en-US">
     <link href="css-practice.css" rel="stylesheet">
    <title>CSS-practice</title>




</head>


<body>  



<ul>
    <li class="home">Home</li>
    <li>News</li>
    <li>Contact</li>
    <li>About</li>
</ul>

<div class="main">

    <h3>How to cook</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, minus.</p>

    <h2>Ingredients</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur blanditiis soluta impedit accusantium nostrum doloribus a velit animi quisquam voluptatibus.</p>

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem doloremque excepturi harum nam eos aliquid doloribus quam voluptates, perferendis vel, explicabo nisi quo est exercitationem unde quibusdam eveniet accusamus fuga et provident repellendus debitis soluta sequi ipsum. Alias harum nesciunt molestiae hic soluta facere dolorem doloribus est. Quibusdam tenetur aperiam eveniet laboriosam similique autem, expedita necessitatibus magnam molestiae dolores? Veniam nulla ipsam, deleniti ipsa eaque commodi fugit quo eligendi, cum alias, dolores aliquam recusandae! Molestiae nisi necessitatibus reprehenderit ratione sed, odit voluptas suscipit inventore magnam iure tenetur ut autem dolorem beatae qui aspernatur accusamus fugit consequatur et odio quia. Debitis!
    
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, quos. Laudantium saepe esse sed expedita voluptate minima soluta ea, eveniet reprehenderit omnis maxime ducimus hic nam inventore maiores nostrum enim corrupti facere, impedit eius? Beatae, tenetur, ullam dignissimos vero vel soluta repudiandae accusamus, cum architecto omnis quae asperiores delectus! Ratione ullam porro maxime ducimus tempore tempora, molestias illo, nisi cupiditate, veritatis perferendis. Eveniet quos facere voluptate ex quis possimus ducimus rerum ipsum nisi maxime modi commodi quo fugiat architecto dolor quia cumque ea similique, illum quam? Dicta facilis, laborum similique perspiciatis, voluptatibus natus quibusdam dolor veniam ipsam qui numquam iure, quidem minus vel voluptatum excepturi eos non. Odio, repudiandae voluptatibus aliquid laborum laboriosam maxime vero in amet id nihil. Illo eligendi possimus voluptas aperiam est, molestiae unde reiciendis molestias corporis eum nisi eaque qui in deserunt commodi nihil eos consequuntur quod libero dolorem dignissimos! Voluptates illum id temporibus accusantium quasi impedit, nobis facilis dolorem reiciendis minus aliquam nostrum eos sunt eveniet voluptate dolorum. Id, nostrum exercitationem. Officia sit mollitia voluptatum et quos, harum tenetur rerum hic laboriosam possimus aspernatur ducimus ea ad repudiandae rem officiis cumque architecto vel quidem voluptas neque facilis soluta dolore! Nesciunt dolor perferendis nam nobis quod voluptates alias atque modi ut eveniet animi, quibusdam et sed consectetur eum hic laboriosam voluptatum. Accusantium voluptatem praesentium vero atque eum omnis quisquam? Nihil dignissimos eligendi vitae esse, accusamus illum nemo repudiandae eveniet saepe laudantium? Aut eum vitae ad aliquam, odio veniam nesciunt libero ullam quam asperiores! Facere, reprehenderit optio eum nisi, sed hic iste incidunt tempora quibusdam, tenetur doloribus corrupti enim obcaecati commodi cum rem culpa quo earum mollitia ducimus voluptatibus voluptatum suscipit quos. In vero, quam numquam sed fuga et, velit, deserunt eligendi accusantium pariatur officia commodi consequuntur porro! Exercitationem officiis deserunt temporibus laboriosam sapiente voluptatem voluptas, et velit adipisci tempora iure corrupti aspernatur pariatur labore sed at? Autem repudiandae nostrum tenetur, nesciunt voluptas quisquam asperiores. Deserunt a deleniti officiis accusamus ipsa enim? Accusantium blanditiis delectus perspiciatis, aliquam, maiores fugit praesentium, provident ex quis unde similique natus aut. Eligendi quia velit perspiciatis. Nihil quae aspernatur deserunt dolor magnam accusamus expedita perferendis laborum nobis libero esse excepturi vitae quisquam, sunt quos. Suscipit blanditiis, numquam, reiciendis ratione doloremque a et totam facilis soluta laborum voluptatibus, nulla tenetur porro magnam enim. Ea consectetur repellat odit quod voluptatem voluptas obcaecati, voluptates sequi corporis recusandae illo delectus maxime quidem, iste, dolor quisquam. Iste, reiciendis nobis laborum laboriosam incidunt asperiores, atque nihil omnis aliquid exercitationem ex accusamus iure fuga unde nisi explicabo voluptates. Quod quisquam quaerat dolore obcaecati fugiat assumenda dolorum tempore tempora? Eius totam, vero laudantium dolore, molestiae, accusamus laboriosam esse nihil illo unde consectetur. Deserunt optio explicabo doloremque sapiente pariatur quae animi aliquam quidem. Ut reprehenderit illum et dicta eum deleniti delectus impedit dolor, explicabo exercitationem quae officiis dignissimos, cumque culpa suscipit accusamus. Officiis quidem ipsum maiores, nobis eius nihil unde? Similique officia, fuga sapiente vitae doloremque illo fugit esse ex repellendus exercitationem excepturi necessitatibus officiis minima fugiat, eius labore dicta vero modi magnam eum enim repellat sint. Velit laborum quidem commodi, magnam explicabo unde sed quasi dignissimos temporibus animi sapiente et reiciendis illo quae aut totam id amet magni harum at facilis ab. Veniam molestias illo sequi nulla quis similique necessitatibus architecto at, aliquam dolor pariatur laboriosam quos et odio voluptatibus sapiente aliquid. Ex quia voluptatum quis dolorem, impedit officia ea dolor ipsum veniam sit omnis consectetur expedita hic. Fugiat quae animi sint ea distinctio eveniet ratione earum expedita possimus deserunt obcaecati, neque deleniti corrupti, nesciunt accusamus quaerat, dignissimos suscipit at adipisci tempore commodi consequatur molestias. Dolore nobis officiis ullam vitae sunt voluptatum sed quos cupiditate aut omnis aliquid maxime nostrum explicabo quia accusamus, ad deleniti dignissimos laborum harum et quam pariatur. Repellat aspernatur laborum aperiam eligendi unde saepe, necessitatibus ducimus harum aut molestias, omnis cumque at a ipsa hic, consectetur eum minima soluta vitae in nobis? Perspiciatis earum explicabo in recusandae exercitationem nostrum modi saepe, blanditiis totam perferendis vel, necessitatibus quasi dolorem cumque ducimus est atque accusantium ab temporibus aliquam impedit error! Eligendi numquam architecto vitae dolores? Ullam qui eum, itaque consequuntur, odit aliquid natus sed eaque odio quis iusto quas distinctio earum perferendis dolor quaerat necessitatibus, fugiat reprehenderit impedit. Quo blanditiis beatae eveniet doloremque quidem, magnam obcaecati nobis magni dolore harum voluptates quod ex explicabo perspiciatis amet tenetur. Error, a explicabo cupiditate officia magnam officiis aut voluptas, amet esse, quod iusto? Libero enim cumque ea, alias magnam nostrum sapiente a blanditiis accusantium, perferendis minima laboriosam odio, nesciunt veniam necessitatibus? Aperiam itaque, facilis quasi maiores qui tenetur odit ipsum est explicabo placeat similique amet nisi, a consequatur molestiae quis, iure illo fuga nobis libero blanditiis enim reprehenderit? Dolorum quia reprehenderit perferendis pariatur quidem quam modi adipisci voluptas animi, veritatis corrupti esse quaerat quisquam dicta, sapiente incidunt atque sit, magnam ipsam odio nihil ratione ab nulla rem. Facere voluptates, aperiam doloribus iusto nobis nam quam rerum, animi pariatur ducimus maxime dicta, quis illum molestiae et ab explicabo? Perferendis quas consectetur tempore mollitia explicabo quam nihil! Voluptas, esse nemo reiciendis expedita mollitia cum facilis recusandae incidunt et porro ea corporis molestiae quaerat error reprehenderit eos ad dolorum cupiditate est. Repudiandae ducimus pariatur deleniti cumque eum saepe vero fuga, eligendi qui consequatur sed exercitationem autem, iusto esse labore at. Modi nemo dolore ratione neque vel quos deleniti veniam porro est omnis molestiae error laudantium voluptatibus, molestias quam labore dolorem nam tempore, asperiores vero mollitia quod. Et doloribus voluptates accusantium, rem delectus necessitatibus. Voluptate sapiente tempora error quis mollitia quibusdam corporis a optio est, explicabo illo voluptatem aut laborum ea sunt fugiat sit officia aperiam inventore. Autem accusamus minima architecto nobis! Atque suscipit quae eveniet! Dolorem at odit optio, culpa modi, accusantium reprehenderit obcaecati ipsum quisquam voluptatum aperiam repellendus perferendis in illum velit esse quae enim eum ratione beatae excepturi aut, expedita quaerat. Similique animi quia ipsa saepe rem consequuntur recusandae odio dignissimos vero rerum inventore suscipit optio, quidem excepturi sit, iste cumque incidunt, maiores quibusdam asperiores eos blanditiis atque! Ipsam blanditiis magnam officia!




</div>












</body>



</html>

在这个例子中，HTML 的高度是 700px。如果位置绝对元素是相对于根元素的，即 HTML，那么为什么将高度 100% 设置为绝对位置元素会将元素扩展到整个视口，尽管 html 的高度只有 700px？

HTML 元素的高度不是 700px，在这种情况下，我想知道为什么？或者它的高度是 700px，但是绝对定位的元素是视口的 100%，而不是 HTML，在这种情况下，我想知道为什么？

【问题讨论】：

添加position: relative到body标签
这并不能真正回答我的问题。
如果您希望具有绝对定位的元素相对于父元素工作（在您的情况下，这是body 标签），那么您需要为父元素编写相对定位规则.是的，这不是答案，这只是作为假设写的评论。
这不是我想要的。我想知道html的高度是否真的是700px，如果是，为什么位置绝对元素没有覆盖那个高度。

标签： html css

【解决方案1】：

"如果位置绝对元素是相对于根元素的，即HTML ..."

简单的答案，不是。如果元素没有定位的祖先，那么它的包含块就不是 html 元素（尽管你可能在别处读过，人们总是会弄错），它的包含块是初始包含块，它的顶部、左侧画布上 (0, 0) 的角，高度和宽度等于视口。

【讨论】：

但我认为最初的包含块是html？
@Ihatecontrolfreaks - 不。初始包含块包含 html 元素的框。你可以把它想象成比 html 元素更上一层楼。
那么，你能以任何方式编辑初始包含块吗？比如你能改变它的高度、宽度、添加背景等吗？
@Ihatecontrolfreaks。并不真地。高度和宽度是固定的以匹配视口。您可以通过更改视口尺寸来更改它们。它不是一个带有边距、边框、填充和内容的盒子，它只是一个矩形。您无法更改其背景，但可以更改画布的背景，因为 html 元素或 body 元素的背景可以传播给它。
这和你学到的任何东西都差不多。有些位很容易粘住，有些则必须查找无数次。总的来说，是的，这只是经验和实践。

【解决方案2】：

根据spec：

根元素所在的包含块是一个称为初始包含块的矩形。对于连续媒体，它具有视口的尺寸...

如果元素具有“位置：绝对”，则包含块由最近的“位置”为“绝对”、“相对”或“固定”的祖先建立，方式如下：

在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在 CSS 2.1 中，如果内联元素被拆分为多行，则包含块是未定义的。

否则，包含块由祖先的填充边缘形成。

您的ul 元素没有 a 'position' of 'absolute', 'relative' or 'fixed' 的祖先，因此它的包含块是initial containing box，即一个等于视口的矩形。

我们可以更改初始包含块吗？

不，但我们可以简单地添加一个 div 来包含所有内容。

...
<body>
<div id="my-containing-box" style="position: relative;">
</div>
</body>
...

【讨论】：