ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

绝对定位是相对定位元素的什么边界进行定位的?

2019-08-19 14:00:37  阅读:184  来源: 互联网

标签:定位 50% 边界 元素 height width background margin


绝对行为元素是以相对定位元素的border内边缘为基准进行定位的。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>绝对定位</title>
  <style>
    body {
      height: 2000px;
      margin: 0px;
    }

    .relativeBox {
      width: 400px;
      height: 300px;
      background: purple;
      padding: 20px;
      border: 20px solid blue;
      margin: 50px auto;
      position: relative;

    }

    .absoluteBox {
      width: 100px;
      height: 100px;
      background: #ccc;
      position: absolute;
      top:0;
      left:0;
    }

    .son{
      width:50%;
      height:50%;
      margin:0 auto;
      background-color:yellow;
    }
  </style>

</head>

<body>
  <div class='relativeBox'>
    <div class='son'>
      <div class='absoluteBox'>
      </div>
    </div>
  </div>
</body>

</html>

  

 

标签:定位,50%,边界,元素,height,width,background,margin
来源: https://www.cnblogs.com/f6056/p/11376739.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有