关闭

CSS相对定位和固定定位

时间: 2019-04-16阅读: 618标签: 定位

一般地,说起定位元素是指position不为static的元素,包括relative、absolute和fixed。前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识

   

相对定位

定义

可能理解起来最简单的定位机制就是相对定位了。采用这种机制时,通过使用偏移属性移动定位元素。当元素相对定位时,它会从其正常位置移走,不过,原来所占的空间并不会因此消失。相对定位元素,会为其所有子元素建立一个新的包含块。这个包含块对应于该元素原本所在的位置

[注意]如果相对定位元素遇到过度受限的问题,一个值会重置为另一个值的相反数。bottom总是等于-top,right总是等于-left

百分比

非常奇怪的是,虽然相对定位的数值型偏移属性是相对于自身的,但其百分比却是相对于包含块的。top和bottom百分比相对于包含块的高度(只是高度height,不包括纵向padding和border),left和right百分比相对于包含块的宽度(只是宽度width,不包括横向padding和border)

[注意]对于IE7-和firefox浏览器来说,若包含块的高度height为auto,则百分比的top和bottom设置有效果,而其他浏览器则都没有效果 

特性

【1】限制范围

一般地,给绝对定位元素限制范围时,为其父级元素设置相对定位relative,因为相对定位元素不脱离文档流

[注意]相对定位元素可以限制绝对定位,但不能限制固定定位,因为固定定位是相对于视窗定位的

【2】提升层级

当想要提升元素层级,又不想脱离文档流时,使用相对定位是一个好主意

行内元素

不同于绝对定位元素可以使元素具有块级元素属性,相对定位应用于inline元素后,由于无法改变其行内元素的属性,不具备块级元素属性,无法设置宽高,其上下margin也依然存在问题

IE兼容

在IE6浏览器下,haslayout下的元素负margin超出父元素的部分会被隐藏掉。这个问题可以通过设置margin负值元素的position属性值为relative来解决。


 

固定定位

固定定位与绝对定位很类似,元素会完全从文档流中去除,但固定元素的偏移是相对于视窗。

[注意]IE6-浏览器不支持

特性

固定定位与绝对定位的很多特性都类似,具有包裹性、破坏性及去浮动的特性,关于各浏览器中display属性的bug、clip属性的隐藏功能、静态位置跳动以及overflow失效的表现都相同,在此就不再赘述。

全屏遮罩

当页面内容超出页面容器大小出现滚动条时,此时使用absolute全屏遮罩会出现滚动条以外部分没有遮住的情况。因为根元素html的父级是document,document的高度和可视区域一致,也就是与视窗一致,是不包括滚动条以外部分的。

这时,只能使用fixed固定定位来实现全屏遮罩效果

.page{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: pink;
    z-index: -1;
}    
.test{
    width: 2000px;
    height: 200px;
    background-color: lightblue;
}
<div class="page" id="page"></div>
<div class="test"></div>    
<button>absolute</button>
<button>fixed</button>
var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
    btns[i].onclick = function(){
        page.style.position = this.innerhtml;
    }
}
//分别点击两个按钮,并拖动横向滚动条查看效果

【transform】

如果设置fixed元素的父级或祖先级元素设置为transform属性,则fixed相对于该元素定位。因为设置transform属性的元素建立了一个新的坐标系

如果要通过fixed实现铺满全屏的效果,一定要注意其父级或祖先级元素不能设置有transform属性


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5927

关闭

css定位方式有哪几种?

复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。

前端粘性定位事件

浏览器的世界里本没有粘性定位事件。然而,网页开发中,元素若使用了粘性定位 position:sticky ,常常还需要一个粘性定位事件,比如,外卖菜单。

css定位 position

定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置,使用 position 属性来设置定位

浏览器获取手机经纬度位置

网址必须为域名,不能用ip直接访问,否则手机浏览器直接拒绝改请求。iphone的浏览器(包括微信扫码进入网站) ,亲测调用 http 的网站是不能获取到经纬度的,是苹果手机安全的考虑,如果使用https网站的话

CSS定位

改变元素在页面中的位置:页面中元素的默认定位方式,默认文档流,从上往下,从左往右;当元素设置浮动后,该元素脱离默认文档流,后面的元素会上前补位。当前元素会在当前行,向左或者向右排列

原生JS实现页面内定位

需求:点击跳转到页面指定位置.利用a标签的锚点跳转。1、利用a标签的锚点跳转,2、用js的scrollIntoView方法,3、获取id为test的元素距离父元素顶部的位置,即offsetTop, 改变父元素的scrollTop

css和xpath定位补充

XPath是一种在XML文档中定位元素的语言。因为HTML可以看作XML的一种实现, 所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。

css绝对定位和相对定位、固定定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。

Ref实现导航滚动定位

在开发项目中时常有点击跳转滚动到锚点的需求,最简单的锚点定位就是给一个a标签,a标签的href = ‘#锚点’,然后给需要跳转的锚点一个id = ‘锚点’。参考最简单的锚点跳转实现方式,在React中使用useRef来实现跳转锚点的功能。

html5获取地理位置和定位

H5地理位置定位功能:首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意;showPosition()获取用户经度纬度;执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!