Java教程

定位

本文主要是介绍定位,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

定位

定位属性和属性值

属性:position

属性值:

static (默认值)静态定位,设置和不设置效果一样

relative 相对定位

absolute 绝对定位

fixed 固定定位

sticky 粘性定位 -css新增的属性

相对定位

属性:position

属性值:relative

定位的方向值都四个方向top,right,bottom,left

方向值的用法:数值+单位(正数,复数都可以)

参照物是元素本身的初始位置

相对定位不会让元素脱离文档流 初始位置依然存在于正常页面中

作用:相对定位的作用是给绝对定位提供参照物的


绝对定位

属性:position

属性值:absolute

绝对定位的参照物(父相子绝)

如果父级没有定位的情况下 子级就会一直往上级查找 如果上级也没有的话就会找到浏览器

如果父级有定位的情况下 那么就会相对于父级进行定位

绝对定位是会脱离文档流(初始位置不存在)

作用:

父级设置相对定位(位置不会有影响) 子级设置绝对定位

绝对定位建议只在小的布局区域使用

固定定位

属性:position

属性值:fixed

常见的用法:网页上的登录,聊天窗口,广告

固定定位是相对于浏览器进行位置上的偏移

固定定位是脱离文档流的 初始位置就不存在了

 

粘性定位(了解,兼容性问题多)

属性:position

属性值:sticky

粘性定位是固定定位(绝对定位)和相对定位的结合

固定(绝对)定位 相对于浏览器

相对定位 不脱离文档流

注意点:

兼容性差,

bug多

定位的总结

1.静态定位,相对定位,绝对定位,固定定位,粘性定位

2.相对定位

相对于初始位置

不脱离文档流

3.绝对定位

如果父级有定位属性就相对于父级进行偏移

如果父级没有定位,属性就一直往上级查找,指导找到浏览器

脱离文档流

4.固定定位

相对于浏览器进行位置偏移

脱离文档流

5.粘性定位

结合了固定定位和相对定位的特点

了解,不做使用

注意

脱离文档流定位的有 固定和绝对

不脱离文档流的定位有 相对

锚点连接

在a标签内有一个href属性 #id属性值

在跳转的地方设置一个id属性,设置id属性值

注意:

固定用法:不可以用class 只能用id

页面只能有一个id 如果有多个按钮就可以设置多个id了

这篇关于定位的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!