CSS学习笔记----position简单举例

最新推荐文章于 2024-10-13 17:00:37 发布

庄公梦蝶

最新推荐文章于 2024-10-13 17:00:37 发布

阅读量433

点赞数

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

本文链接：https://blog.csdn.net/u014548034/article/details/40891147

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>定位问题</title>
	</head>
	<style type="text/css">
	/*position用来表示定位信息，默认为static，不表示任何方式，只是遵从html规定，常用的有两个值：absolute（绝对）
	和relative（相对）；relative的top等值的设定是相对于父类容器，而absolute则是相对于上一级position的值为
	absolute的父类容器，如果没有则默认为body。
	 另外，absolute不会占用父类的空间，而relative则不论子容器当时的位置如何，都会占用父类的空间*/
	#parent{
		border:4px solid red;
		width:400px;
		height:400px;
		margin-top:100px;
		margin-left:100px;
	}
	#c1{
		border:2px solid blue;
		width:200px;
		height:200px;
		position:absolute;
		top:20px;
		left:20px;
	}
	#c2{
		border:2px solid orange;
		width:200px;
		height:200px;
	}
	#feng{
				margin:30px;
			}
	#feng li {
				border:5px solid blue;
				text-align:center;
				width:200px;
				height:40px;
				list-style:none;
			}
	/*一般会在li中加span来放置文本，然后通过在span中设置position来控制文本位置*/
	#feng li span{
		position:relative;
		top:10px;
	}
	</style>
	<body>
		<div id="parent">
			<div id="c1">snake001</div>
			<div id="c2">snake002</div>
		</div>
	
	<ul id="feng">
			<li><span>白日放歌须纵酒</span></li>
			<li><span>白日放歌须纵酒</span></li>
			<li><span>白日放歌须纵酒</span></li>
			<li><span>白日放歌须纵酒</span></li>
	</ul>
	</body>
</html>