您的位置：首页 > Web前端 > CSS

CSS定位

2016-05-12 21:49 393 查看

一、CSS定位：改变元素在页面上的位置

二、CSS定位机制：
普通流：元素按照其在HTML中的位置顺序决定排布的过程

浮动

绝对布局

三、CSS定位属性：
1. position 把元素放在一个静态的、相对的、绝对的、或固定的位置中

四个属性：

static 静态（偏移量对它不起效果）

relative 相对定位

absolute 绝对定位

fixed 固定（不随滚动条滚动而滚动）

偏移量：
top 元素向上的偏移量

left 元素向左的偏移量

right 元素向右的偏移量

bottom 元素向下的偏移量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<link href="style1.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="position1"></div>
<script>
for(var i=0; i<100; i++){
document.write(i+"<br/>");
}
</script>
</body>
</html>

#position1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 100px;
top: 100px;
}

2. z-index 设置元素的堆叠顺序

#position1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 100px;
top: 100px;
z-index: 2;
}

#position2{
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
left: 110px;
top: 70px;
z-index: 1;
}

z-index:值谁的值大谁就在前面显示
这个值没有限制，可以随便设置，但是尽量在100以内
不单单相对布局存在这个问题，绝对布局也是存在的

3. overflow 设置元素溢出区域发生的事情

4. clip 设置元素显示的形状

5. vertical-align 设置元素垂直对齐方式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS 定位

相关文章推荐

新的分享

章节导航