码迷,mamicode.com
首页 > Web开发 > 详细

css定位讲解

时间:2016-08-01 22:36:41      阅读:249      评论:0      收藏:0      [点我收藏+]

标签:

定位分三种:相对定位,绝对定位,固定定位;

    相对定位:position:relatve;

    绝对定位:position:absolute;

  固定定位:position:fixed;

一,相对定位

1,相对定位:

  1)相对定位就是微调元素的位置,让元素相对自己的原来位置,进行位置调整;

  2)不脱标,实际上还是原来的位置;

2,相对定位的用途:

   相对定位有坑,所以一般不用于做“压盖”效果。页面中,效果极小。就两个作用:

  1)微调元素;

  2)做绝对定位的参考,(子绝父相);

二,绝对定位1,脱离文档流:

  绝对定位后,标签就不会区分行内元素与块级元素,不用display转换就可以改变高宽;

2, 1)绝对定位参考点是页面的左上角,而不是浏览器的左上角; top定位;

   2)用bottom定位就是浏览器首屏窗口尺寸,对应的左下角;

3,以盒子为参考点

     一个绝对定位的元素,如果父辈元素中出现了也定位的元素,那么将以父辈这个元素为参考点;

     注意:1)不一定是相对定位,任何定位,都可以作为参考点;

    2)绝对定位的儿子,无视参考的那个盒子的padding,找border的内侧为参考点;"子绝父相"才有意义,父亲不脱标,儿子脱标在父亲的范围里面移动;

技术分享

技术分享

4,绝对定位的盒子居中:

    margin:0 auto;失效

    解决方法:

        left:50%;

        margin-left:负的宽度一半;

下面有个小问题不错:

技术分享

技术分享

 

三,固定定位

固定定位就是相对浏览器窗口定位,页面如何滚动,这个盒子的显示位置不变;

         position:fixed;

四,z-index

1,z-index值表示谁压着谁大,数值大的压盖住数值小的;

2,前提是有定位了的元素,才能有z-index值,不管相对,固定,绝对定位都可以使用z-index,而浮动不能用;

3,z-index值没有单位,就是一个正整数。默认的z-index值是0。

4,如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。

5, 从父现象:父亲怂了,儿子再牛也没用。

 

css定位讲解

标签:

原文地址:http://www.cnblogs.com/xiao-song/p/5727228.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!