4.02.03

朱雀 2021-12-20 15:49 192阅读 0赞

/\*fixed定位：相对于浏览器窗口\*/  
position: fixed;

<html>  
<head>  
<meta charset="utf-8">  
<title>绝对定位、相对定位</title>  
<style>  
　　\#d\{  
　　　　width: 200px;  
　　　　height: 200px;  
　　　　background: red;  
　　　　\}  
　　\#d1\{  
　　　　width: 50px;  
　　　　height: 50px;  
　　　　background: yellow;  
　　　　/\*相对定位:相对于元素本身应该在的位置移动\*/  
 　　　　position: relative;  
　　　　left: 20px;  
　　　　bottom: 20px;  
　　　　\}  
　　\#d2\{  
　　　　width: 50px;  
　　　　height: 50px;  
　　　　background: pink;  
　　　　\}  
　　\#dd\{  
　　　　width: 200px;  
　　　　height: 200px;  
　　　　background: blue;  
　　　　position: relative;  
　　　　\}  
　　\#dd1\{  
　　　　width: 50px;  
　　　　height: 50px;  
　　　　background: orange;  
　　　　left: 20px;  
　　　　bottom: 20px;  
　　　　/\*绝对定位：距离父类（有position样式的父类）...body\*/  
　　　　position: absolute;  
　　　　left: 20px;top: 50px;  
　　　　z-index: 100;  
　　　　\}  
　　\#dd2\{  
　　　　width: 50px;  
　　　　height: 50px;  
　　　　background: grey;  
　　　　position: absolute;  
　　　　left: 30px;  
　　　　top: 60px;  
　　　　z-index: 50;  
　　　　\}  
</style>  
</head>

<body>  
<div id="d">  
　　<div id="d1"></div>  
　　sadassafasf  
　　<div id="d2"></div>  
</div>  
<div id="dd">  
　　<div id="dd1"></div>  
　　<div id="dd2"></div>  
</div>  
</body>  
</html>

<html>  
<head>  
<meta charset="utf-8">  
<title>无标题文档</title>  
<style>  
　　\#d\{  
　　　　width: 200px;  
　　　　height: 200px;  
　　　　background: red;  
　　　　/\*fixed定位：相对于浏览器窗口\*/  
　　　　position: fixed;  
　　　　left: 20px;  
　　　　top: 50px;  
　　　　\}  
</style>  
</head>

转载于:https://www.cnblogs.com/boss-H/p/10645852.html

4.02.03

发表评论取消回复

还没有评论，来说两句吧...

相关阅读