Css之⽗元素⼦元素定位
1.优先级：id的优先级>class的优先级哈。如果div的属性和class的相同时，也会优先class的内容噢~
2.⼦元素和⽗元素同为position：absolute的时候，不管⼦元素的z-index是不是⽐⽗元素的⼩，都会覆盖⽗元素。
3.position中absolute和relative的区别：前者会覆盖。后者就相当于占位⼀样，不能覆盖。
4.position中absolute和relative的局限性：
relative————（css）
1. /* CSS Document */
2. div
3. {
4. margin:0;
5. }
6. .a
7. {
8. width:150px;
9. height:150px;
10. background:#f00;
11. }
12. .b
13. {
14. position:relative;
15. top:20px;
16. left:10px;
17. width:50px;
18. height:50px;
19. background:#ff0;
20. }
html：
<div class="a">1111111111111111<div class="b"></div>1111111111</div>
显⽰图⽚：
由于使⽤绝对定位会保留原有的空间⼤⼩，⽽⽤了相对定位后，⽂本之间会出现空⽩区域，⼜因为相对定位显⽰的优先级会更⾼，所以会覆盖⽗元素的⽂本内容。
absolute————（css）
1. /* CSS Document */
2. div
3. { position:absolute;
4. margin:0;
5. }
6. .a
7. {
8. top:0px;
9. left:0px;
10. width:150px;
css固定定位11. height:150px;
12. background:#f00;
13. }
14. .b
15. {
16. top:150px;
17. left:0px;
18. width:50px;
19. height:50px;
20. background:#ff0;
21. }
html：
<div class="a">1111111111<br><br><br><br><br><br><br><br><br><br><br>1111111111</div>
<div class="b"></div>
显⽰图⽚：
由于两个class都定义了绝对定位，所以⽆法调整，会导致页⾯出现异常。
5.浮动float和固定元素：
当⼀个元素定义了float的时候，如果第⼆个元素和第⼀个元素的和相加⼩于浏览器的宽，则会显⽰在同⼀⾏。
1. /* CSS Document */
2. .a
3. {
4. width:150px;
5. height:150px;
6. background:#f00;
7. float:left;
8. }
9. .b
10. {
11. width:200px;
12. height:150px;
13. background:#ff0;
14. }
HTML：
<div class="a">111</div>
<div class="b">222</div>
显⽰图⽚：
因为b是固定元素，所以a会覆盖⼀部分。
当第⼆个（即时第⼆个元素是float：left）第三个元素相加还是⼩于浏览器的宽的时候，还是会显⽰在同⼀⾏。
1. /* CSS Document */
2. .a
3. {
4. width:150px;
5. height:150px;
6. background:#f00;
7. float:left;
8. }
9. .b
10. {
11. width:200px;
12. height:150px;
13. background:#ff0;
14. float:right;
15. }
16. .c
17. {
18. width:150px;
19. height:150px;
20. background:#f0f;
21. }
html：
<div class="a">111</div>
<div class="b">222</div>
<div class="a c">333</div>
显⽰图⽚：
<div class="a c">当a和c元素都有相同属性的时候，优先c元素呦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。