css定位学习小结

CSS positioning

attribute:position

function的概念:检索或设置元素的定位方法(改变元素位置的属性)

positioning分为静态定位、绝对定位、相对定位、固定定位、粘性定位

(1)静态定位:

position默认值,默认文本流状态。

不识别由左右上下

(2)绝对定位:

a3360引用指定的坐标:根据已经定位的父元素更改位置。

b :如果当前没有父元素或者没有找到父元素,请将整个文档作为参考。

c :绝对定位,超出文档流,不占用空间

(3)相对相对定位:

a3360参考:其默认位置!

b :总是占据空间并且不会损坏文件流

(4)固定位置:位置:fixed

a3360引用对象:browser window

b :与整个文本流分离,不占用空间

(5)sticky positioning:position : sticky;

a 3360位置3336相对和位置:固定。

b:如果页面没有超出窗口范围,则跟随relative

如果内容超出窗口位置,则跟随fixed。

我们如何定位草莓类似于将草莓放入冰箱。首先,我们拿起草莓,找到冰箱(冰箱此时的参考),然后考虑将草莓放在冰箱的什么地方(顶部、底部、左侧、右侧)。

定位步骤:

1:将“位置”属性添加到元素中,以证明元素需要改变其位置。

2:确定引用对象!(由position的属性值决定:static \ absolute \ relative \ fixed \ sticky)

3:确定左上方和右下方的坐标

如下:

有两种方法可以将内容放在浏览器窗口的中心:

first:

position : fixed;

left :50%;

top :50%;

margin:-半高0 0-半宽。

second:

position : fixed;

left:0right:0

top:0bottom:0

margin:auto

此外,我们可以使用定位来使子元素在父元素中居中。

方法如下:position:absolute

left:0right:0

top:0bottom:0

margin:auto