admin管理员组文章数量:1611398
盒子定位(position)
1.引入
我们知道浏览器在解析html页面的时候是按照标准的文档流方式就行解析的。即html页面元素是按照从左到右、自上而下的方式进行排布(我们可以这样认为，整个页面是一个二维坐标，坐标的原点在左上角，坐标轴的方向如下所示)，我在进行页面布局的时候，需要页面元素按照指定的方式或者是位置进行排列。这一个我们就需要定位元素的摆放位置。下面我们一起学习一下盒子的定位问题。
2.盒子定位(position)
(1).分类:盒子定位根据给出的不同的方式，给出了6种不同的定位方式，分别为静态定位(static)、相对定位(relative)、固定定位(fixed)、绝对定位(absolute)、sticky(滚动定位)和堆叠顺序(z-index)。
(2)、语法
position相关的语法
position:static | relative | fixed | absolute | sticky
参数详解：
static:静态定位
relative:相对定位
fixed:固定定位
absolute:绝对定位
sticky:滚动定位(3)、静态定位
静态定位，定位的默认方式，其摆放元素的时候使用标准的文档流的方式进行元素的摆放，即从上到下、从左到右的方式进行摆放。
(4)、相对定位(relative)
①: 相对定位，元素相对于其正常显示位置进行定位。
②:相对定位相关的代码演示和效果截图
<style type="text/css">
h1{
font: bold 50px "宋体";
color: #b8aa94;
}
p{
font: 20px "宋体";
color: #000000;
position: relative;
top:-60px;
}
</style>
<body>
<h1>蜀道难</h1>
<p>作者:李白</p>
</body>(5)、固定定位(relative)
①: 固定定位，固定定位是生成绝对定位的元素。相对于浏览器窗口进行定位。
②:固定定位相关的代码演示和效果截图
<style type="text/css">
h1{
font: bold 50px "宋体";
color: #b8aa94;
}
p{
font: 20px "宋体";
color: #000000;
position: fixed;
top:60px;
left: 100px;
}
</style>
<body>
<h1>蜀道难</h1>
<p>作者:李白</p>
</body>(6)、绝对定位(absolute)
①: 绝对定位，绝对定位可以将指定的标签放置在绝对坐标位置上，绝对定位使得标签的位置和文档流无关。因此可以不占据空间，可以浮在网页上。
②:绝对定位相关的代码演示和效果截图
<style type="text/css">
h1{
font: bold 50px "宋体";
color: #b8aa94;
}
p{
font: 20px "宋体";
color: #000000;
position: absolute;
top:100px;
right: 100px;
}
</style>
<body>
<h1>蜀道难</h1>
<p>作者:李白</p>
</body>(7)、滚动定位(absolute)
①: 滚动定位，元素根据用户的滚动位置进行定位
②:滚动定位相关的代码演示和效果截图
<style type="text/css">
.box1{
position: -webkit-sticky;
position: sticky;
top: 0px;
border: 1px solid green;
}
.box2{
padding-bottom: 1000px;
}
</style>
<body>
<div class="box1">
这个是要放置在顶部的内容
</div>
<div class="box2">
HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。<br>
HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，
它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，<br>
它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML，将所需要表达的信息按某种规则写成HTML文件，<br>
通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
</div>
</body>
(8)、堆叠顺序z-index
①: 堆叠顺序z-index，该属性可以实现如果多个元素需要在同一个位置显示，设置元素显示的叠放位置顺序。值越大，优先级越高，摆放的位置就就越在上面。默认元素的z-index值是:0
②:堆叠顺序z-index相关的代码演示和效果截图
<style type="text/css">
img{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
border: 1px solid red;
}
</style>
<body>
<p>这是一个大柚子</p>
<img src="images/2.jpg" >
</body>版权声明：本文标题：前端开发_HTML5_盒子定位(position) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728603987a1165218.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论