CSS——定位与浮动
程序员文章站
2024-01-26 12:00:28
...
定位（Position)
定位属性：
– position top left right bottom overflow clip z-index
0、什么也没指定的时候
#position1
{
width:100px;
height: 100px;
background-color: blue;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>定位</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="position1"></div>
<script type="text/javascript">
for(i=0;i<100;i++)
{
document.write(i+"<br/>")
}
</script>
</body>
</html>按照流的方式自上而下
1、position:relative
#position1
{
width:100px;
height: 100px;
background-color: blue;
position: relative;
right:30px;
top:10px ;
}相对定位元素的定位是相对其正常位置。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占 的空间不会改变。
2、position:absolute
#position1
{
width:100px;
height: 100px;
background-color: blue;
position: absolute;
}好像从页面中抠出来，其他的依旧自上而下
Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。
3、position:fixed
#position1
{
width:100px;
height: 100px;
background-color: blue;
position: fixed;
left:20px;
top:10px;
}不管怎样滚动，一直都固定在那里
4、position:stistic
#position1
{
width:100px;
height: 100px;
background-color: blue;
position: static;
left:20px;
top:10px;
}HTML元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
浮动
- 浮动：float属性
值：left:向左浮动
right:向右浮动
none:不浮动
inherit:从父级继承浮动属性- clear属性：
去掉浮动属性（包括继承来的属性）
值：left/right:去掉元素向左向右浮动
both：左右两侧均去掉浮动
inhert:从父级继承来clear的值
- clear属性：
#fd
{
width:100px;
height: 100px;
background-color: red;
}
#sd
{
width: 100px;
height: 100px;
background-color: blue;
}
#td
{
width: 100px;
height: 100px;
background-color: green;
}