使用position设置经典的网站前端结构

能脱离文档流的设置：

//搞清楚position的属性值的意思就容易明白

使用position布局能使得标签脱离文档流（但是属性值为relative除外），这个脱离文档流是不会受到父级标签约束的，除非：

若某个绝对定位元素的容器也被定位过，那么该元素指定的top和left值将不会基于文档的根元素html（也就是浏览器窗口的左上角）计算，而是会基于其容器的左上角计算这个偏移量。换句话说，也就是：被定位过的容器将扮演其中所有元素绝对定位起始点的角色。

<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	#div1 {

	width: 200px;
	position: absolute;
	height: 600px;
	background: darksalmon;
	top: 10px;
	left: 5px;
	}

	#div2 {
	width: 700px;
	height: 1200px;
	background: yellowgreen;
	position: absolute;
	left: 220px;
	top: 10px;
	}

	#div3 {
	width: 300px;
	height: 600px;
	background: hotpink;
	position: absolute;
	left: 930px;
	top: 10px;
	}

	#div5 {
	background: chartreuse;
	position:relative;
	height: 620px;
	width: 1240px;
	top: 0px;
	left: 0px;;
	}

	#head {
	width: 1240px;
	height: 150px;
	background: coral;;
	}

	#footer {
	width: 1240px;
	height: 150px;
	float: left;
	background: darkturquoise;

	}
	</style>
	</head>
	<body>

	<div id="head">head</div>
	<!--div5的position设置为relative，意思就是：div5还是在流当中，遵从由上到下排列，只是设了top和left后，就往右或下方挪-->
	<!--div5的position设置为absolute，那么div5就脱离了文档流，可以不理head的位置，随意按top和left来相对浏览器摆放，除非div5又被一个设了position的div包裹-->
	<div id="div5">
	<!--div1,div2,div3设了position: absolute，那么就脱离了文档流，如果div5不设置position，那么div123的top和left就会相对于浏览器显示的地方-->
	<!--如果div5设置了position，无论position设置了什么,那么div1,2,3的top和left就相对于div5-->
	<div id="div1">B</div>
	<div id="div2">A</div>
	<div id="div3">C</div>
	</div>
	<div id="footer"></div>

	</body>
	</html>

posted on 2017-08-27 22:55 耀礼士多德阅读(368) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现

耀礼士多德