css---继承定位和默认定位

最新推荐文章于 2023-04-11 16:51:15 发布

阿陈陈陈

最新推荐文章于 2023-04-11 16:51:15 发布

阅读量341

点赞数

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

本文链接：https://blog.csdn.net/weixin_46218101/article/details/120667915

版权

笔记同时被 2 个专栏收录

60 篇文章 1 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

前端入门笔记之css(8)

继承定位： 继承父级的定位。
父级是什么定位，它就是什么定位

{position:inherit;left:2000px;top:0;}

代码练习：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>继承定位</title>
	<style type="text/css">

		*{margin: 0;padding: 0;}
.div1{width: 200px;height: 200px;background: indianred;position: fixed;left: 0;top: 0;z-index: -1;}/*窗口定位*/
.div2{width: 100px;height: 100px;background: pink;position:inherit;left: 200px;top: 200px;float: left;}/*继承了父级的定位，也是窗口定位*/
.div3{width: 100px;height: 100px;background: blue;position: static;float: left;z-index: 1;}/*默认定位：就是没有定位*/

	</style>
</head>
<body style="height: 3000px">
<div class="div1">
	<div class="div2"></div>
	<div class="div3"></div>
</div>

</body>
</html>