精华内容
下载资源
问答
  • 问题描述: “如果用position来布局页面,父级元素的position属性必须为relative” 这一段经常在网上看到,一开始以为是官方标配,后面在学习的过程中有些疑问,故特意拿出来研究...(特别说明,两个position:abs...

    问题描述:

    “如果用position来布局页面,父级元素的position属性必须为relative”

    这一段经常在网上看到,一开始以为是官方标配,后面在学习的过程中有些疑问,故特意拿出来研究学习了下,发现并非如此,先说结论:

    绝对定位的父级节点只要是relative、fixed、absolute其中一个即可实现容器内相对布局,以下是找到的资料印证的。(特别说明,两个position:absolute会从当前文档流中删除,即都是浮层,可能会挡住后面的内容,这个要注意下)

    https://www.jianshu.com/p/d1e02e3abd11(第一部分,以下是引用内容)

     


    css position属性允许你定位一个元素,通过使用top,left,bottom,right属性,当然你必须先设定position的属性值,以便告诉浏览器依据什么方式进行定位。

    • static
      元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
    • relative
      元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
    • absolute
      元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
    • fixed
      元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

    因为绝对定位(position:absolute)在实际应用中有着十分重要的地位,特别进行深度探究以便在使用中能更得心应手。
    元素设置position:absolute后主要会带来4个影响。

    1.脱离文档流,其在文档流中所占空间会被关闭。

    2.可相对与已被定位的父元素进行定位,逐级向上直到找到为止。

    3.生成一个块级框,不论原来它在正常流中生成何种类型的框。(其实就是形成bfc)。

    4.拥有z-index属性,可以进行层级设定,最大为2147483647。(等值按网页代码中层出现的顺序,后出现的层高于先出现的层)

    1、2、和4都好理解这里对2进行着重分析。
    因为定位可以是realitive、absolute和fixed。故父级元素会出现3中情况。
    1.父元素relative(√)。
    .parents{width: 200px;height:200px;position: relative;background: #f60;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

     


    2.父元素fixed(√)
    .parents{width:200px;height:200px;position:fixed;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

     

     


    3.父元素absolute(√)
    .parents{width:200px;height:200px;position:absolute;background: #f60;letf:100px;top:100px;} .box{width: 100px;height:100px;position: absolute;background: #06f;top: 50px; left: 50px;

     

    结论:relative、fixed、absolute表现效果一致,父容器只要定位position就有效。

    第二个问题top、right、bottom、left定位到最近一个具有定位设置父元素的边缘的距离。这个边缘指的是什么?
    因为盒子的margin 、border、padding、及content都会影响盒子的尺寸。在这里对父元素为relative的模型进行依次添加。
    1.添加margin:50px 0 0 50px;

     

    2.添加border-left: 50px solid #000;border-top: 50px solid #000;

     

    3添加padding:50px 0 0 50px;

    结论:定位所依据的父容器的边缘指的是padding+元素内容整体的边界。

    第三个问题left除了设置length具体尺寸,%相对于父容器的尺寸,默认会设置成auto,通过浏览器来计算位置。那么具体是怎么计算的呢。父元素为relative的模型进行探究。
    1.子元素top: auto;left: auto;

     

    2.父元素添加margin-left:50px;

    1.png

     

    3.父元素继续添加border-left:50px solid #000;

     

    4.父元素继续添加padding-left:50px;

     

    5.父元素继续添加padding-top:50px;

    结论:可以看出设置auto后,left等属性计算距离的边界变为content内容本身。

    展开全文
  • position:absolute这个是绝对定位; 是相对于浏览器的定位。 比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。 position:relative是相对定位,是相...

    position:absolute这个是绝对定位
    是相对于浏览器的定位。
    比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。

    position:relative是相对定位,是相对于前面的容器定位的。这个时候不能用top left在定位。应该用margin。

    比如:<div class="1"></div><div class="2"></div>

    当1固定了位置。1的样式float:left;width:100px; height:800px;
    2的样式为float:left; position:relative;margin-left:20px;width:50px;
    2的位置在1的右边,距离120px

    展开全文
  • 详解position:sticky

    千次阅读 2020-02-14 10:29:21
    今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题 先说一下sticky这个属性的定义 sticky: 元素根据正常文档流进行定位,然后相对它的最近...

    今天被人问到position:sticky的使用,由于css这块特效做的不多.深知自己的短板.于是痛定思痛.决定好好积累遇到的css问题

     

    先说一下sticky这个属性的定义

    sticky:

    元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于toprightbottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

    MDN是这么解释的.专业性有点强,可能不太好理解.但如果说它的最长的用途,大家都知道,那就是吸顶固定.

    就是下面这个效果

     

     

    该值总是创建一个新的层叠上下文(stacking context)。注意,一个sticky元素会“固定”在离它最近的一个拥有“滚动机制”的祖先上(当该祖先的overflow 是 hiddenscrollauto, 或 overlay时),即便这个祖先不是真的滚动祖先。这个阻止了所有“sticky”行为(详情见Github issue on W3C CSSWG)。

     

     

     

    简单说,就是在一个滚动的容器里,将一个子元素设置为postion:sticky  在元素显示在视口中时,显示的效果与relative 一致

    当元素被滑动出视口外是,显示效果与fixed一致

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • position:relative的用法

    千次阅读 2019-12-25 21:28:41
    position:relative日常应用的时候一般是设置给position:absolute;的父层的, 父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了...

    position:relative日常应用的时候一般是设置给position:absolute;的父层的,
    父层position:relative; 子层position:absolute;的话, 就是依照父层的边界进行定位的, 不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素…

    比如要实现商品细节图展示的效果,可以使用如下的方法,这个例子很好的解释了position方法的使用。
    细节展示
    这个页面中,右侧大的图片所在的div class="big"需要设置absolute的绝对定位,那它的父元素.box就必须设置relative相对定位。
    左侧小图中的红色方块需要随着鼠标移动,因此也需要设置absolute的绝对定位。那么它的父元素.small就必须设置relative相对定位。
    右侧div中的大图片需要随鼠标移动,因此它也需要设置absolute绝对定位,而它的父元素.big已经是absolute绝对定位了,因此大图片的定位是相对.big来的。大图片的坐标(0,0)的位置在右侧div的左上角的位置。
    图中红色方块的移动方向和大图片的移动方向是相反并且成比例的。大图片的移动距离是方块移动距离的倍数。

    <style type="text/css">
    			.box{
    				position: relative;
    			}
    			.small{
    				position: relative;
    				width: 350px;
    				height: 350px;
    				border: solid 1px darksalmon;
    			}
    			.mask{
    				position: absolute;
    				width: 80px;height: 80px;
    				background-color: rgba(223,24,22,0.2);
    				display: none;
    			}
    			.big{
    				position: absolute;
    				left: 360px;
    				top: 0px;
    				border: solid 1px darksalmon;
    				width: 400px;height: 400px;
    				overflow: hidden;
    				/*display: none;*/
    			}
    			#bigimg{
    				
    				position: absolute;
    				left: 0px;
    				top:0px;
    				border: solid seagreen 1px;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div class="box">
    			<div id="small" class="small">
    				<img id="smallimg" src="img/small.jpg"/>
    				<div id="mask" class="mask">					
    				</div>
    			</div>
    			<div class="big" id="big">
    				<img id="bigimg" src="img/big.jpg" />
    			</div>
    		</div>
    

    这段代码实现商品细节图的页面框架设计
    下面是javaScript的实现代码

    <script type="text/javascript">
    			function $ (id) {
    				return document.getElementById(id)
    			}
    			
    			$("small").onmouseover=function  () {
    				$("mask").style.display="block"
    				$("big").style.display="block"
    			}
    			$("small").onmouseout=function  () {
    				$("mask").style.display="none"
    				$("big").style.display="none"
    			}
    			$("small").onmousemove=function  (e) {
    				var event = e ||window.event
    				//鼠标在文档的位置
    				var pageX = event.pageX||event.clientX+document.documentElement.scrollLeft
    				var pageY = event.pageY||event.clientY+document.documentElement.scrollTop
    				
    				//mask的位置 = 鼠标的位置-mask的一半宽度
    				var maskX = pageX - $("mask").offsetWidth/2
    				var maskY = pageY - $("mask").offsetHeight/2
    				
    				//mask可以移动的范围
    				if (maskX<0) {
    					maskX=0
    				} else if(maskX>$("small").offsetWidth-$("mask").offsetWidth){
    					maskX=$("small").offsetWidth-$("mask").offsetWidth
    				}
    				
    				if (maskY<0) {
    					maskY=0
    				} else if(maskY>$("small").offsetHeight-$("mask").offsetHeight){
    					maskY=$("small").offsetHeight-$("mask").offsetHeight
    				}
    				
    				$("mask").style.left=maskX+"px"
    				$("mask").style.top=maskY+"px"
    				
    				var bigImg = $("bigimg").offsetWidth-$("big").offsetWidth
    				var mask = $("small").offsetWidth-$("mask").offsetWidth
    				var rate = bigImg/mask
    				
    				//bigimg的坐标
    				$("bigimg").style.top = -rate*maskY+"px"
    				$("bigimg").style.left= -rate*maskX+"px"
    				console.log($("bigimg").style.top)
    				
    			}
    			</script>
    
    展开全文
  • position : fixed ; left : 0 ; right : 100px ; top : 100px ; bottom : 100px ; background-color : gray ; } style > head > < body > < main > < article style =" ...
  • 区别:定位为relative的元素脱离正常的文本...position各个属性值的定义: 1、static:默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。 2、relative:生成相对定位的元素...
  • 不要乱用position:fixed

    千次阅读 多人点赞 2020-02-18 21:38:39
    经常会有一个需求,在一个固定窗口内容滚动,底下有操作按钮需要固定,不随着滚动,一般第一个念头就是用固定定位position: fixed,但是fixed是以窗口为父元素去定位的,这么做肯定是错的,需要正确使用相对定位和...
  • absolute定位是相对于父元素的绝对定位,且父元素必须有position:absolute或者position:relative,若其父元素没有,则逐层网上寻找,直至浏览器窗口 relative相对定位是相对于当前位置定位,即相对于自己定位。...
  • position:fixed 固定并居中

    千次阅读 2019-08-29 15:14:49
    不是前端,做前端的活真是寸步难行,一个居中就搞了好久 <html> <head> <meta charset="utf-8"> <title>... position:fixed; margin:auto; left:0; right:0; bottom:10...
  • position:ablosute和position:relative的简单理解 先看一下两者的定义: relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。...
  • 导致position:sticky失效的原因

    千次阅读 2020-09-22 13:35:29
    导致position:sticky失效的原因 一、简介 sticky 英文字面意思是粘,粘贴,所以称之为粘性定位。sticky属性依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值...
  • position:relative

    万次阅读 2019-07-30 09:53:06
    1.当将块的position属性设置为relative时,与设置为absolute完全不同,这时子块是相对于其父块来作为参照对象偏移定位,而不是相对于浏览器窗口,并且相对定位的块元素脱离标准流浮上来后,无论是否进行移动,其所占...
  • position:fixed 失效的解决方法

    千次阅读 2020-04-11 15:35:18
    我一听简单,用position:fixed就行了啊。 我记得position:fixed的元素 相对于屏幕视口 的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。 结果并没有起作用,还是跟着滚动。怎么办?查! 原来,在...
  • [CSS] position:absolute水平居中

    千次阅读 2019-11-09 16:08:00
    最近听了周杰伦的《不爱我就拉倒》,感觉周董现在写歌有点任性,反正我就是要这样写...言归正传,对于设置了position:absolute的元素怎么设置水平居中。 1 __ 最开始的时候一直用了比较蠢的方法,在元素外部套一层...
  • ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽高 ②一个内联元素设置position:absolute会自动转为一个块状元素 那么我提出三个问题: problem01:一个没有设置宽高的块状元素position:absolute,...
  • position:fixed;

    万次阅读 2017-12-26 21:01:44
    为什么设置position:fixed;div会消失。 此文如有不正确的地方,敬请留言指出,谢谢。 1.position:fixed;作用 生成绝对定位的元素,相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom...
  • position:absolute绝对位置的正确使用

    千次阅读 2020-04-02 17:42:11
    position:absolute设置的元素 其绝对位置相对的元素是它最近的一个父级元素 同时,该父级元素必须满足position的值是relative、absolute、fixed 偏移值由此元素的top、buttom、left、right确定 若绝对定位...
  • CSS中的position:relative理解

    万次阅读 多人点赞 2019-05-27 23:16:52
    今晚来说说CSS中的position属性,其实在实际开发页面过程中,记录一下这个让我迷茫的relative,我将它分为三种情况进行说明 包含关系:父级absolute,子级relative; 包含关系:父级relative,子级absolute; 并列...
  • position:sticky的用法

    千次阅读 2019-10-05 21:49:36
    效果: 但当向上滑动到100px时就会固定到100px的位置,此属性对于移动端非常好用,但是对于pc端不一定好用
  • 一、position:relative 相对定位 分两种情况分析: · 无 position: relative; · 有 position: relative。 代码如下图: 显示效果如下图: 我们给 box4加入 position: relative属性. * 如果元素加上...
  • 关于position:sticky失效的原因分析

    千次阅读 2020-07-31 14:36:33
    sticky属性依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。 sticky属性仅在以下几个条件都满足时有效: 父元素不能overflow:...
  • 在开发时遇到一个吸顶效果...这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父...
  • position:fixed显示错位

    千次阅读 2018-09-27 14:16:18
    在项目开发过程中遇到一个问题,使用layer显示弹出框时,弹出框里面的标签设置position:fixed显示位置是从弹出框位置进行定位,而非屏幕视口(viewport)的位置来定位。 经过调查发现,原来layer弹出框使添加了layui...
  • 之前在探讨float属性的时候就已经提到了position:absolute的概念,绝对定位和浮动在很多方面都具有相似性,包括“块状化”,“包裹性”,“破坏性”等等,在理论层面上两者是一对兄弟关系。然而在实际场景中,由于...
  • 小程序position:fixed失效

    千次阅读 2020-08-12 11:53:02
    fixed失效:元素的父级元素设置了transform: translate(0, 0)属性,该属性设置之后,子元素固定定位失效 解决方法一:对父级元素设置transform: none;...页面刷新fixed也会失效,可以用position:sticky. ...
  • css粘性定位position:sticky问题采坑

    万次阅读 多人点赞 2018-07-14 10:16:13
    前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
  • position:absolute与relative的区别

    千次阅读 2019-05-28 17:48:26
    Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定...
  • 固定定位position:fixed与滚动条

    千次阅读 2020-12-03 11:45:48
    固定定位fixed与滚动条 x轴滚动条 visibility-x: scroll; position:fixed; top:0; left:0; width: 100%; visibility: scroll;
  • 最近一个项目甲方一定要两个tab菜单吸顶, 在网上找了好久没找到满意的,然后在一个博客中发现可以用position:sticky解决,因为之前没见过这个属性,然后搜了下,了解了用法,写了个小demo,发现挺好用的,完美解决...
  • position: sticky 详解(防坑指南)

    千次阅读 2020-05-14 08:36:56
    而 sticky 代码仅需要如下: .sticky { position: sticky; position: -webkit-sticky; top: 0; } demo点击预览在这,请用 safari 看,幺蛾子的 chrome 需要开 flag 才能看,兼容性我会在后面提到。 兼容性 所以放心...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,279,706
精华内容 511,882
关键字:

position: