4.02.03

/*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>

posted on 2019-04-02 22:23 boss-H 阅读(162) 评论(0) 收藏举报

刷新页面返回顶部

4.02.03

导航

公告