CSS定位

更新日期: 2019-09-17阅读: 3.2k标签: 定位

一、什么是定位

改变元素在页面中的位置


二、定位的分类

    1、普通流定位

    2、浮动定位

    3、相对定位

    4、绝对定位

    5、固定定位


三、普通流定位

页面中元素的默认定位方式,默认文档流,从上往下,从左往右

1、每个元素都在页面有自己的空间

2、每个元素都是从父元素的左上角开始显示

3、块级元素都是按照从上到下的方式逐行排列,每个元素独占一行

4、行内元素是多个元素在一行显示,从左往右逐个排列


四、浮动定位

1、当元素设置浮动后,该元素脱离默认文档流,后面的元素会上前补位。当前元素会在当前行,向左或者向右排列

float:left、right、none

特点:

(1)、元素一旦浮动,就脱离文档流了,不占据页面空间,后面会上前补位

(2)、浮动元素会停靠在父元素的左边/右边,或者其他已经浮动元素边缘

(3)、浮动就是解决多个块级元素在一行显示的问题

2、浮动引发的特殊情况

a、(1)当父元素显示不下所有已浮动元素的时候,显示不下的几个将换行显示,换行显示的规则:优先上浮,之后向左/右对齐

    (2)浮动元素占位,浮动元素会根据浮动方向,占据方向上的位置,不让其他后面浮动元素占用

b、元素一旦浮动,如果没有定义宽度,宽度会以内容为准

c、元素一旦浮动起来,就变成了块级元素,可以设置宽高,可以设置上下外边距

d、文本,行内元素,行内块元素是不会被浮动元素压在下方。而是巧妙的避开了所有浮动元素,围绕者浮动元素显示

e、清除浮动:元素一旦浮动起来会对后续元素带来一定影响(后续元素会上前补位),如果后续元素不想上前补位,那么给后续元素设置clear,清除前面浮动元素带来的影响

clear:left/right/both

f、高度坍塌,块级元素的高度如果不设置,高度以内部元素内容为准,但是如果内部元素都是浮动元素,浮动元素不占据页面空间,父元素的高没有了

    解决方案:

        1、直接为父元素设置高度,弊端:不知到父元素高度

        2、父元素也浮动,弊端:浮动会影响后续元素

        3、overflow:hidden,弊端:当元素真的需要显示溢出内容时,就显示不出来了

        4、在父元素中追加一个空的块级元素,并设置clear:both


3、显示

1、显示方式

display

元素在页面中的显示表现形式(块级,行内,行内块)

取值:

(1)none:隐藏,不显示元素,不占据位置

(2)block:让元素的表现形式和块级元素一样,特点:独占一行,可以设置宽高,垂直外边距

(3)inline:让元素和行内元素一样,特点:多个元素公用一行,不能设置宽高和垂直外边距

(4)inline-block:让元素的表现形式和行内块一样,特点:多个元素在一行中显示,但是可以设置宽高和垂直外边距

(5)table:让元素的表现形式和table一样,特点:尺寸以内容为准,每个元素独占一行,允许修改尺寸

2、显示效果

visibility

取值

    visible:默认可见

    hidden:隐藏

display:none和visibility:hidden的区别  :display隐藏,脱离文档流,不占据页面空间,visibility不脱离文档流,占据页面空间

3、透明度

opacity

取值:0~1 越小越透明

opacity和rgba的区别:opacity作用于元素,只要跟元素相关的颜色都会跟着透明,可以作用到子元素,rgba只改变当前元素的透明度,不会影响其他元素

4、垂直对齐方式

vertical-align

取值:top/middle/bottom

使用场合:

    (1)table标签中,控制文字的垂直对齐,取值:top/middle/bottom

    (2)img标签,控制图片与前后文字的垂直对齐方式,取值:top/middle/bottom/baseline

5、光标

cursor:

取值:

    (1)default:箭头

    (2)pointer:手

    (3)text:I

    (4)crosshair:十字

    (5)wait:沙漏或者转圈

    (6)help:问号


五、定位

1、定位的属性

position:

取值:    

    (1)static: 默认值,静态,默认文档流

    (2)relative:相对定位

    (3)absolute:绝对定位

    (4)fixed:固定定位

元素的position设置为relative/absolute/fixed中任意一个值,该元素被称为已定位元素

偏移属性

top/bottom/right/left

left:100px   向由移100px

2、相对定位

元素相对于原来的位置偏移某个距离,没有脱离默认文档流,页面上的位置不会被其他元素补位

语法:position:relative;必须配合偏移属性使用

使用场合:作为绝对定位的祖先元素

    (1)位置微调

3、绝对定位

绝对定位的元素会脱离默认文档流,后面元素会向前补位,绝对定位的元素会相对于离他最近的已定位的祖先元素去实现定位,如果所有祖先元素不是已经定位元素,相对于body去实现定位

属性:position:absolute;配合偏移属性使用

使用场合:有层叠效果时

4、固定定位

将元素固定在页面的某一个位置,元素不会随滚动条发生位置变化,一直固定在可是区域内

语法:

position:fixes;配合偏移属性使用

注意:

    (1)固定定位脱离文档流,不占页面空间

    (2)固定定位元素变为块级元素

    (3)相对于body实现位置的偏移

堆叠顺序

元素变为已定位元素,有可能出现堆叠,想修改堆叠顺序

z-index

取值:无单位的数字,数字越大,元素越靠上显示,父子元素间z-index无效,永远都是子元素在父元素上面,只有已定位元素才能使用z-index


链接: https://fly63.com/article/detial/5351

css3中position:sticky

最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部;使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式;

苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩。你可以使用position:absolute样式来定义对话框,但是position:relative的元素出现的位置决定了对话框在页面中的绝对位置。

原生JS实现页面内定位

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

css和xpath定位补充

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

html5获取地理位置和定位

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

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

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

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

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

CSS相对定位和固定定位

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

前端粘性定位事件

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

css定位方式有哪几种?

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

点击更多...

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