CSS3 定位

定位

定位就是元素根据一个目标来设置位置。


相对定位

<!-- relative 设置目标 -->
<div style="width: 640px; height: 200px; background: #f2f2f0; position: relative;">

 <!-- absolute 设置位置 | 设置距离 top / bottom / left / right -->
 <div style="width: 100px; height: 100px; background: #a6ed8e; position: absolute; top: 20px; left: 20px;"></div> 

</div>  

效果


绝对定位

<!-- 如果不设置目标点,默认会以窗口为定位目标  -->

<div style="width: 10px; height: 10px; background: #f76262; position: absolute; top:0; left:0;"> </div> 

z-index

<!-- 当两个元素通过定位重叠在一起时,应该优先显示哪个元素,这由元素的层级决定,改变层级可以使用 z-index 属性 -->

<div style="z-index: 1;"> </div>
<div style="z-index: 2;"> </div> <!-- 优先 -->

fixed

<!-- position: absolute; 定位的元素会受滚动条拖动影响,使用 position: fixed 定位可以跟 “简明教程” 的菜单栏一样,一直置顶 -->

<div style="position: fixed; top:0; left:0;"> 置顶 </div>
CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex