当前位置: 首页 > Web前端 > CSS

css定位总结

时间:2023-03-31 13:26:01 CSS

position:static;//position默认值表示元素按照标准文档流定位,设置left,top,right,bottom,z-index无效。position:relative;//按照标准文档流相对定位,当left,top,right,bottom,z-index没有设置时,position同static,当left,top,right,bottom,z-index时当它是静态的时候是相对于它的位置设置的。其他元素的位置不会受到该元素的影响而改变其位置,以弥补其偏离后留下的空隙。也就是说其他元素的位置和静态的时候是一样的。代码如下:

效果图:div3是相对定位,position偏移了,但是div4的位置还是和div3偏移的时候一样。位置:绝对;文档流之外的绝对定位。离开文档流意味着文档流中的元素将被定位,就好像它不存在一样。absolute相对于它的第一个非静态祖先元素定位。如果一个绝对定位的(position属性值是绝对的)元素没有“定位”的祖先,那么它是相对于文档的body元素的,并且它随着页面的滚动而移动。代码如下:div2div3
div4效果图:位置:固定;在文档流的固定定位之外,元素将相对于窗口定位,这意味着即使页面滚动,它仍然会停留在相同的位置。像relative一样,top、right、bottom和left属性可用。position:sticky'粘性定位。是一个新的css3属性。它的行为类似于position:relative和position:fixed的组合,当目标区域在屏幕上可见时,它的行为类似于position:relative;当页面滚动超出目标区域时,它的行为类似于position:fixed,它会固定在目标位置。(这是网上大部分的说法,但不太对,这只适用于粘性定位元素是body的子元素的情况。如果sticky以元素的父元素为目标,情况就不同了。具体可以看下面的代码分析)但是一般来说,元素定位是在越过特定阈值之前相对定位,之后是固定定位,但是固定定位的相对对象比较复杂,不一定是浏览器窗口。并且同时设置top和bottom时,top的优先级高,同时设置left和right时,left的优先级高。left或right2,父元素必须完全可见。这里的可见是指父元素本身不能被父元素的父元素的overflow:hidden覆盖,从而使父元素的最小高度不能完全可见。3.父元素本身不能设置overflow:hidden。4、如果父元素的溢出值是auto或scroll等防止父元素内容溢出的属性,sticky定位的元素是相对于其父元素定位的,而不是浏览器窗口。如果允许父元素的内容溢出并且溢出的内容超出浏览器窗口,则粘性定位元素相对于浏览器窗口定位。这是测试代码:body{margin:0;填充:0;}#bottom{宽度:100%;高度:70px;行高:70px;文本对齐:居中;背景:淡蓝色;定位:粘性;保证金:0;底部:0px;}#top{宽度:100%;高度:70px;行高:70px;文本对齐:居中;:0;顶部:0px;}#div0{宽度:100%;高度:200px;}#div1{height:400px;//分别调整height:800px,将overflow的值调整为auto、visible等值,看效果overflow:auto;}顶部
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
  • 内容
底部</div>