标签：定位 盒子 父级 color height position 四种
定位一共有4种：
1.position：static 静态定位既无定位；
2.position：relative 相对定位；
特点：①以自身的位置为准为定位点；②定位之后原来位置仍然存在（既没有脱离文档流）；
3.position：absolute；
特点：①以有定位的父级元素为定位点为准定位；②如果父级元素都没有定位，那么以游览器为准进行定位；③定位之后不保留位置（既已经脱离文档流）④一般的使用方法是（子集用绝对，父级用相对）子绝父相；
因为相对定位即使走了仍然占着位置，而父级用了绝对定位，底部的元素就会上来，影响到页面布局；
例如：
<style type="text/css"> /* 粉色盒子1使用了相对定位，由于盒子1使用了相对定位，所以导致位置还占有着，所以灰色盒子3不会顶上来*/ .div1{ position: relative; width: 500px; height: 100px; background-color: pink;
} /* 黑色盒子2使用了绝对定位，是粉色盒子1的子集*/ .div2{ position: absolute; top: 30px; left: 20px; width: 30px; height: 30px; background-color: #000000;
} /* 灰色盒子3 */ .div3 { width: 500px; height: 150px; background-color:gray; } </style> </head> <div class="div1"> <img src="images/ad.jpg"> <div class="div2"></div> </div> <div class="div3"></div>
<body>
代码显示效果如下:
标签：定位,盒子,父级,color,height,position,四种 来源： https://www.cnblogs.com/ddzzyy/p/11970215.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。