CSS学习笔记(六) 定位
<h3 id="1定位模式">1、定位模式</h3><p>首先，我们先来看看 CSS 中三种定位模式的一些基本特点【重要】，它们分别是绝对定位、相对定位和浮动定位</p>
<ul>
<li><strong>相对定位</strong>
<ul>
<li>相对定位的元素出现在正常文档流中</li>
<li>通过设置垂直或水平位置，可以让元素相对于起点进行移动</li>
<li>无论是否进行移动，元素仍然占据原来的空间</li>
<li>因为相对定位的元素占据原来的空间，所以移动元素可能会覆盖页面上的其它元素</li>
</ul>
</li>
<li><strong>绝对定位</strong>
<ul>
<li>绝对定位的元素将从文档流中完全删除，因此它们在文档流中不会占据空间</li>
<li>通过设置垂直或水平位置，可以让元素相对于最近的已定位的祖先元素进行移动</li>
<li>如果没有已定位的祖先元素，则相对于最初的包含块进行移动</li>
<li>因为绝对定位的元素与文档流无关，所以它们可以覆盖页面上的其它元素</li>
</ul>
</li>
<li><strong>浮动定位</strong>
<ul>
<li>浮动定位的元素不属于文档流，它们可以任意移动，直至碰到包含框或另一个浮动框为止</li>
<li>可以使用 float 属性定义元素向哪一侧浮动</li>
<li>可以使用 clear 属性定义元素哪一侧不允许其他浮动元素</li>
<li>可以使用 visibility 属性规定元素是否可见</li>
</ul>
</li>
</ul>
<h3 id="2定位属性">2、定位属性</h3>
<p>我们可以使用 <strong>position</strong> 属性规定定位类型</p>
<p>position 属性需要配合下面的属性确定移动的距离，它们接受一个长度值或百分数值，或者设置为 auto</p>
<ul>
<li><strong>top</strong>：定义元素的 上外边距边界 与其 包含块上边界 之间的偏移</li>
<li><strong>right</strong>：定义元素的 右外边距边界 与其 包含块右边界 之间的偏移</li>
<li><strong>bottom</strong>：定义元素的 下外边距边界 与其 包含块下边界 之间的偏移</li>
<li><strong>left</strong>：定义元素的 左外边距边界 与其 包含块左边界 之间的偏移</li>
</ul>
<p>position 属性的可选值如下：</p>
<ul>
<li>
<p><code>static</code>：默认值，<strong>不设置定位，元素将出现在正常流中</strong></p>
<p>此时忽略 left、top、right 、bottom 属性</p>
</li>
<li>
<p><code>absolute</code>：绝对定位，<strong>相对于 static 定位以外的第一个父元素进行定位</strong></p>
<p>此时通过 left、top、right 、bottom 属性规定位置</p>
</li>
<li>
<p><code>fixed</code>：固定定位，<strong>相对于浏览器窗口进行定位</strong></p>
<p>此时通过 left、top、right 、bottom 属性规定位置</p>
</li>
<li>
<p><code>relative</code>：相对定位，<strong>相对于正常位置进行定位</strong></p>
<p>此时通过 left、top、right 、bottom 属性规定位置</p>
</li>
<li>
<p><code>inherit</code>：从父元素继承</p>
</li>
</ul>
<p>下面，大家可以试着改变 position 属性的值，看看它们的样式会发生什么样的变化</p>
<pre><code class="language-html"><!DOCTYPE HTML>
<html>
<head>
<style>
div {
/* position 属性的可选值：static、absolute、fixed、relative */
position: static;
}
.green-div {
background: green;
width: 300px;
height: 300px;
top: 50px;
left: 50px;
}
.yellow-div {
background: yellow;
width: 100px;
height: 100px;
top: 25px;
left: 25px;
}
.red-div {
background: red;
width: 100px;
height: 100px;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="green-div">
<div class="yellow-div"></div>
<div class="red-div"></div>
</div>
</body>
</html>
</code></pre>
<p>好了，公布答案！</p>
<ul>
<li>当 position 的值为 static 时，样式效果如下：</li>
</ul>
<p><img src="https://img2018.cnblogs.com/blog/1459925/201909/1459925-20190903194126811-447783355.png"></p>
<p>当 position 为 static 时，元素不设置定位，left、top、right 、bottom 属性均设置无效</p>
<p>因此，<font color="green">绿块</font> 将会直接显示出来，<font color="yellow">黄块</font>、<font color="red">红块</font> 由于是 <font color="green">绿块</font> 的子元素，所以它们也会在 <font color="green">绿块</font> 中按正常文档流显示</p>
<ul>
<li>当 position 的值为 absolute 时，样式效果如下：</li>
</ul>
<p><img src="https://img2018.cnblogs.com/blog/1459925/201909/1459925-20190903194133898-1055909179.png"></p>
<p>当 position 为 absolute 时，元素均为绝对定位，它们将会从正常文档流中删除</p>
<p>同时，absolute 规定绝对定位的元素相对于 static 定位以外的第一个父元素进行定位</p>
<p>因为 <font color="green">绿块</font> 的父元素为 窗口，因此 <font color="green">绿块</font> 距离 窗口 上边界 50 px，距离 窗口 左边界 50 px</p>
<p>因为 <font color="yellow">黄块</font> 的父元素为 <font color="green">绿块</font>，因此 <font color="yellow">黄块</font> 距离 <font color="green">绿块</font> 上边界 25 px，距离 <font color="green">绿块</font> 左边界 25 px</p>
<p>因为 <font color="red">红块</font> 的父元素为 <font color="green">绿块</font>，因此 <font color="red">红块</font> 距离 <font color="green">绿块</font> 上边界 50 px，距离 <font color="green">绿块</font> 左边界 50 px</p>
<ul>
<li>当 position 的值为 fixed 时，样式效果如下：</li>
</ul>
<p><img src="https://img2018.cnblogs.com/blog/1459925/201909/1459925-20190903194141983-94678522.png"></p>
<p>当 position 为 fixed 时，元素均为绝对定位，它们将会从正常文档流中删除</p>
<p>同时，fixed 规定绝对定位的元素相对于浏览器窗口进行定位，因此</p>
<p><font color="green">绿块</font> 距离浏览器窗口上边界 50 px，距离浏览器窗口左边界 50 px</p>
<p><font color="yellow">黄块</font> 距离浏览器窗口上边界 25 px，距离浏览器窗口左边界 25 px</p>
<p><font color="red">红块</font> 距离浏览器窗口上边界 50 px，距离浏览器窗口左边界 50 px</p>
<ul>
<li>当 position 的值为 relative 时，样式效果如下：</li>
</ul>
<p><img src="https://img2018.cnblogs.com/blog/1459925/201909/1459925-20190903194150227-859620825.png"></p>
<p>当 position 为 relative 时，元素均为相对定位，并且无论元素是否移动，它们总是占据 <strong>原来的位置</strong></p>
<p>同时，relative 规定相对定位的元素相对于 <strong>原来位置</strong>（原来位置请看值为 static 时候的样式）进行定位，因此</p>
<p><font color="green">绿块</font> 距离原来位置的上边界 50 px，距离原来位置的左边界 50 px</p>
<p><font color="yellow">黄块</font> 距离原来位置的上边界 25 px，距离原来位置的左边界 25 px</p>
<p><font color="red">红块</font> 距离原来位置的上边界 50 px，距离原来位置的左边界 50 px</p>
<p>【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】</p>
</div>
<div id="MySignature" role="contentinfo">
版权声明：本博客属于个人维护博客，未经博主允许不得转载其中文章。<br><br>
来源：https://www.cnblogs.com/wsmrzx/p/11455099.html
頁:
[1]