css定位总结

GT 发布于2019-08-29 15:08 / 2853人阅读

摘要：的默认值，表示元素按照标准文档流定位，设置，，，，无效。脱离文档流意味着文档流里的元素会当它不存在一样定位。代码如下效果图脱离文档流的固定定位，元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

position:static;//position的默认值，表示元素按照标准文档流定位，设置left，top，right，bottom，z-index无效。

position:relative;//按照标准文档流相对定位，不设置left，top，right，bottom，z-index时，位置和static时一样，设置left，top，right，bottom，z-index时会相对于它在static时的位置定位。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。也就是说其它元素的位置和它是static时一样。代码如下：

效果图：

div3是relative定位，位置偏移了，但div4的位置仍然和div3为偏移时一样。

position: absolute;脱离文档流的绝对定位。脱离文档流意味着文档流里的元素会当它不存在一样定位。absolute是相对于它的第一个定位不是static的祖先元素定位。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。代码如下：



    div2
    div3
    div4

效果图：

position:fixed;脱离文档流的固定定位，元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和 relative 一样， top 、 right 、 bottom 和 left 属性都可用。

position:sticky"粘性定位。是一个新的css3属性。

它的表现类似position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。（这是网上的大多数说法，但不完全对，这只适用于sticky定位元素是body的子元素时的情况。如果sticky定位元素的父元素，情况就会不一样。具体的请看下面的代码分析）

但总的来说元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位，只是固定定位相对的对象比较复杂不一定是浏览器窗口。
并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高

以下是我经过测试后的结果：
position:sticky生效条件：
1、设置了top或bottom，left或right
2、父元素要全部可见，这里的可见是指父元素本身不能被父元素的父级元素的overflow:hidden给盖住，使父元素的最小高度不能全部可见。
3、父元素本身不能设置overflow:hidden。
4、如果父元素的overflow的值为auto、scroll等使得父元素的内容不溢出的属性时，sticky定位的元素的定位是相对于它的父元素的而不是浏览器窗口。如果父元素的内容允许溢出且溢出内容超出浏览器窗口，sticky定位的元素的定位是相对于浏览器窗口的。
下面是测试代码：

 
    
        
        顶部
        
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
内容
            内容
内容
        
        底部

混合云专线服务年终总结网络总结方法总结函数总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113128.html

前端面试之CSS总结(上)

摘要：重点介绍一下常见的三列布局之圣杯布局和双飞翼布局。两种布局方式的不同之处在于如何处理中间主列的位置圣杯布局是利用父容器的左右内边距定位双飞翼布局是把主列嵌套在后利用主列的左右外边距定位。 CSS总结由于最近在准备前端方面的面试，所以对自己平常工作中用到的地方做出一些总结。该篇是CSS部分(上)，有许多地方叙述的并不是十分详细，只是大致的描述一下，给自己提供一个知识轮廓。本篇中主要描述...

琛ｈ。 2019-08-29 11:18 评论0 收藏0
垂直居中相关知识总结

摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。方法总结一、绝对定...

Labradors 2019-08-19 17:31 评论0 收藏0
垂直居中相关知识总结

摘要：垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在上提问了个问题关于垂直居中，大家有没有什么比较好的建议。垂直居中相关知识总结前言工作中用到了很多关于垂直居中相关的知识之前，在SF上提问了个问题CSS关于垂直居中，大家有没有什么比较好的建议。非常感谢各位前辈对我的帮助，前辈们给的答案都非常多也各式各样，我觉得有必要把大家的回答总结一下。方法总结一、绝对定...

GeekGhc 2019-08-01 15:02 评论0 收藏0
前端计划——面试题总结-CSS篇

摘要：定位使元素的位置与文档流无关，因此不占据空间。可以知道属性有以下几个特点该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。前端面试之CSS篇 1、三种基本引入方式外部样式表内部样式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

马永翠 2019-08-29 13:09 评论0 收藏0
CSS属性用法总结

摘要：轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局被调整。 1.background系列属性在为元素设定样式的时候，往往需要为该元素设置背景，一般有颜色，背景图片等． 1.1 背景颜色在CSS类中使用background-color属性为元素设置背景颜色： /* CSS */ .box { width: 200px; heig...

soasme 2019-08-29 12:57 评论0 收藏0