首页 > 其他 > 详细

4.02.03

时间:2019-04-02 22:40:05      阅读:143      评论:0      收藏: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>

<body>
<div id="d"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

4.02.03

原文:https://www.cnblogs.com/boss-H/p/10645852.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!