CSS定位的使用方法

这篇文章主要介绍“CSS定位的使用方法”,在日常操作中,相信很多人在CSS定位的使用方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS定位的使用方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

目前创新互联公司已为成百上千家的企业提供了网站建设、域名、网络空间、网站改版维护、企业网站设计、海宁网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

定位的使用包含两个部分:

  1. 定位的方式

  1. 偏移值  left,right,top,bottom偏移值准确的理解是“距离什么位置有多大”  如 top:100px; 距离顶部为100像素 (向下走)。
    ####静态定位
    所有的标准流都是静态定位

position:static;
  • 一般用于将某些已经定位的元素还原成标准流,用的很少

  • 偏移值对于静态定位来说不起作用,我们以后说的元素定位不包括静态定位

        Title    

####相对定位
相对定位是相对自己的标准流的位置进行定位移动

position:relative;

特性:
1. 移动的出发点是自身标准流的位置
2. 相对定位移动的元素不会对别的元素产生干扰,“没有脱标”,真正占得位置还是标准流的位置(肉体不在 灵魂永驻)
3. 可以盖在标准流的上方
4. 一般用于微调元素和配合绝对定位来实现效果
####绝对定位

position:absolute;

特性:
1.移动的出发点:
从绝对元素开始一直往上级找(直到找到最大的html标签),在这个过程中,只要有一个元素(A元素)是定位(相对,绝对,固定)的任何一个,这个绝对定位的元素就会参照这个A元素进行定位,并且不会在往上找了,如果一个都没有,最终会以html元素定位
2.脱标
1.1. 脱标的元素不占标准流的位置
1.2. 不会继承父级的的宽度,内容有多个就撑多大 (不论块级还是行内)
1.3. 可以直接写宽高 (不论块级还是行内)
1.4. margin:auto对于脱标元素不起作用
巧妙运用:让一个定位盒子水平垂直居中

使用方式:
在工作中,绝对定位"大多"配合相对定位一起使用(父相子绝)
父相:在标准流上占有位置
子绝:针对这个标准流在去移动
注意:父绝子绝的情况也有,只是很少,不要完全形成思维定式。
####固定定位

特性:
1.脱标
1.1.脱标的元素不占标准流的位置
1.2.不会继承父级的的宽度,内容有多个就撑多大 (不论块级还是行内)
1.3.可以直接写宽高 (不论块级还是行内)
1.4.margin:auto对于脱标元素不起作用
2.移动的出发点:浏览器窗口 (直接表现:滚动条对于固定元素没有作用)

四种定位总结

定位模式是否脱标占有位置是否可以使用边偏移移动位置基准
静态static不脱标正常模式不可以正常模式
相对定位relative不脱标占有位置可以相对自身位置移动
绝对定位absolute完全脱标,不占有位置可以相对于定位的父级移动位置
固定定位fixed完全脱标,不占有位置可以相对于浏览器移动位置

####z-index
控制“定位”元素的叠放层级

  1. z-index只针对定位元素有效果

  1. z-index值越大,层级越高

  1. 如果父元素已经比较过层级了(父元素“都有”z-index的时候,并且值不为auto),那么子元素与子元素之间是不会再去比较的

到此,关于“CSS定位的使用方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站标题:CSS定位的使用方法
网站网址:http://ybzwz.com/article/pgghpj.html

其他资讯