lock an element to its parent with absolute positioning - zilongxuan001/LearnFreecode GitHub Wiki
另一个对CSSposition属性的选择是absolute,它锁定元素相对于它父元素的内容。
不像relative位置，这会把这个元素从文档的自然中移除，所以它周围的元素会忽略它。CSS偏移属性（top,bottom,left,right）被用于调整位置。
绝对位置另一个细微的差别就是它相对锁定最近的父元素。如果忘了给父元素添加位置规则（通常使用position: relative），浏览器会保持跟踪链条，最终默认body标签的位置规则。
通过宣称#searchbar元素的位置position是absolute,锁定#searchbar元素到它的父元素section右上方。
分别给它的top和right偏移50px。
<style>
#searchbar {
position: absolute;
top: 50px;
right: 50px;
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
Applied Visual Design: Lock an Element to its Parent with Absolute Positioning | Learn freeCodeCamp
2018-10-23 16:42:22