本文详细介绍了CSS中的定位布局，包括静态定位static、固定定位fixed、相对定位relative和绝对定位absolute。重点讲解了各定位方式的特点、语法、应用场景，并通过示例展示了它们的效果和分析。
文章目录
CSS定位布局（position）
1.定位布局(position)简介：
position定位灵活且简单。你可以相对元素框的常规位置定义元素的具体位置，可以相对父元素或另一个元素定位元素的位置，甚至可以相对可视区（例如浏览器窗口）定位元素的位置。正是由于定位布局的出现使得用户精准定位页面中的任意元素成为可能，页面布局操作更加随心所欲
2.CSS静态定位static
a.介绍：
如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位即static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。（以下我们将static元素称为无定位元素)
3.CSS固定定位fixed
a.介绍:
参考浏览器的四条边通过设置元素与浏览器四条边的距离进行定位，采用固定定位的元素脱离文档流且在视野中的位置不会因滚动条的拖动发生改变
b.语法：
position：fixed；
top：数值
bottom：数值
left：数值
right：数值
c.说明：
“position：fixed”使得元素为成固定定位元素、接着用（top，right) (top,left) (bottom,right) (bottom,left)中任意一组来设置元素相对浏览器四条边的距离从而确定元素位置
d.举例：
效果展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
#first{
width:120px;
height: 1000px;
line-height: 600px;
background-color: darkorange;
}
#second{
position: fixed;/*设置元素为固定定位*/
top:30px;/*距离浏览器顶部30px*/
left:160px;/*距离浏览器左部160px*/
最低0.47元/天 解锁文章
559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
