文章目录
CSS定位属性允许对元素进行定位。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 一般处于普通流，通过设置可以改变为浮动流和绝对定位。
浮动和定位是冲突的。
一般在写CSS样式时，把定位写在最后面。
1. position 属性
属性值：
- -----position: static
元素框会正常生成。 - -----position: relative
元素框相对自己正常位置移动，原本所占的空间不会改变。
<html>
<head>
<style>
.left
{
position:relative;
left:20px;
top:3px;
}
</style>
</head>
<body>
<h1>i am fine</h1>
<p>how are you</p>
<p class="left">how are you</p>
</body>
</html>
p元素相对于本身移动了，产生如下效果：
- -----position: absolute
元素框相对于最近的已定位的父元素或祖先元素为标准进行移动，定位后不占位置。
<html>
<head>
<style>
.one
{
position: absolute;
top:0;
left: 20px;
}
</style>
</head>
<body>
<h2>hihihihihihihihi</h2>
<h3 class="one" >hellohellohellohellohellohello</h3>
</body>
</html>
呈现结果：
- -----position: fixed
相对于浏览器窗口是固定的，不会随着滚动条滚动。
比如说：打开淘宝浏览器页面，左边会有如下的图案，它使用了定位中的fixed值，因此不会随着滚动条滚动。
注意：所有的定位和top right bottom left 联合在一起起作用
- -----position: inherit;
默认它不和其他一样，随浏览器定位，如果在它的父元素上一级相对定位，它就随其移动。
2. overflow 属性（溢出）
举个例子：
<html>
<head>
<style>
p
{
background: rosybrown;
width:200px;
height:100px;
overflow:值;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</body>
</html>
-
visible （默认，元素正常显示）
-
hidden （溢出部分被隐藏）
-
scroll （溢出部分通过滚动条被查看,不过有可能即使元素框中可以放下所有内容也会出现滚动条）
-
auto （如果内容被裁剪，溢出部分通过滚动条被查看）
-
inherit （继承）
3. z-index属性（堆叠顺序）
注意： 它只在定位元素上奏效（例如 position:absolute;）
-
设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的上面。
在做网页时，最后面的在最上面。 -
元素可拥有负的 z-index 属性值。
z-index:-1;
z-index:1;
4. cursor（光标）
常用属性值：
- pointer ：鼠标指向这个元素时呈现为手状。
- move：鼠标指向的这个元素可以移动。
5. 方向属性： left|top|right|bottom
属性值：length；%
6. 定位中的水平居中
在定位中，水平居中是这样表示的：
p{
position: absolute;
right:0;
left:0;
margin:auto;
}
每日一记：
- 想提高优先级，用 ！important
- a元素不继承字体，它有超链接特定的样式。
- 行内元素设置高度时，必须先以行内块（块级）形式显示。
- input是默认存在边框的，可以用 border:none; 去掉边框线。
- 一般元素之间是存在默认距离的，可以用浮动解决。给元素设置浮动时，要具体到当前的元素。
- 在布局中，尽量精确块的宽高，仔细计算总宽高的像素。
- 关于溢出问题，在实际操作中，写的下面的页面不出现，如果找不到出错点，就试试overflow:hidden上面页面的部分，可能会因为计算的高存在问题，把位置占了。
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
