css 网页布局方式 -- 定位布局

最新推荐文章于 2022-10-25 15:23:36 发布

俞泰鑫

最新推荐文章于 2022-10-25 15:23:36 发布

阅读量222

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/god_yutaixin/article/details/103996115

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

相对定位relative：
往往用于父元素，让其他需要定位布局的元素来参照它
参照元素在文档中的原始位置进行偏移，不会脱离文档流

<head>
	<style>
		div{
			width:100px;
			height:100px;
			border:solid 1px red;
			}
		#a{
			/* 设置相对定位布局 */
			position:relative;
			/* 相对原始位置向左偏移5px */
			left:5px;
			}
	</style>
</head>
<body>
	<div></div>
	<div id="a"></div>
</body>

绝对定位absolute:
参照离他最近的已经定位(常常参照相对定位的元素)的祖先元素进行偏移
如果没有祖先元素，则参照窗口进行偏移
脱离文档流

<head>
	<style>
		div{
			width:100px;
			height:100px;
			border:solid 1px red;
			}
		#a{
			position:relative;
			left:5px;
			}
		#c1{
			background-color:blue;
			width:10px;
			height:10px;
			/* 设置决定定位布局 */
			position:absolute;
			/* 参照相对定位的 #a 进行偏移:居中 */
			left:50%;
			margin-left:-5px;
			}
	</style>
</head>		
<body>
	<div></div>
	<div id="a">
		<div id="c1"></div>
	</div>
</body>
</html>

固定定位布局
脱离文档流
参考窗口进行定位，不跟随网页滚动而滚动

<head>
	<style>
		ul{
			/* 去除内外边距 */
			padding:0;
			margin:0;
			/* 取消列表前的序号 */
			list-style-type:none;
			/* 设置父元素包裹住子元素 不让他们溢出来*/
			overflow:hidden;
			}
		ul>li{
			/* 设置元素浮动布局 */
			float:left;
			margin:0 10px;
			}
		#nav{
			background-color:blue;
			/* 设置元素 #nav 内部的子元素字体颜色为白色 */
			color:white;
			/* 设置为固定定位布局 */
			position:fixed;
			/* 设置完固定定位布局后需要重新设置width */
			width:100%;
			/* 固定定位布局需要给出具体位置 */
			top:0;
			left:0;			
			}
	</style>
<body>
	<div id="nav">
		<ul>
			<li>首页</li>
			<li>国内</li>
			<li>国际</li>
		</ul>
	</div>
</body>

俞泰鑫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 网页布局方式 -- 定位布局

相对定位relative：往往用于父元素，让其他需要定位布局的元素来参照它参照元素在文档中的原始位置进行偏移，不会脱离文档流<head> <style> div{ width:100px; height:100px; border:solid 1px red; } #a{ /* 设置相对定位布局 */ position...
复制链接

扫一扫

专栏目录