笔记内容笔记内容
脱离文档流
对联广告
登陆弹窗
不受制于父元素,即使父元素带有定位属性
position:fixed;固定定位 原来的位置会被后面的元素占用
不管它有没有父元素,父元素是否定位,它都只会以浏览器窗口的四个角为原点定位,x、y轴的正方向和相对定位、绝对定位一样
position:relative; 相对定位(相对于元素本身位置进行移动)
position:absolute; 绝对定位(相对于父辈级元素有定位属性position来移动;否则以浏览器为准)
position:fixed; 固定定位(只相对于浏览器来定位;与父辈级是否有定位属性position无关)
position:inherit; 继承(只继承父级的定位属性【前提:父级有定位属性】)
fixed(可以用来做广告,弹窗等,它的位置不会随着浏览器的滚动而改变)
fixed: 固定定位,配合使用top、right、bottom、left的属性,元素会脱离正常的文档流,在整个窗口进行移动定位,并拥有层级的概念。
常用场景: 1、对联广告 2、登录弹窗
定位属性:position (脱离文档流)
position:relative; 相对定位(相对于元素本身位置进行移动)
position:absolute; 绝对定位(相对于父辈级元素有定位属性position来移动;否则以浏览器为准)
position:fixed; 固定定位(只相对于浏览器来定位;与父辈级是否有定位属性position无关)
position:inherit; 继承(只继承父级的定位属性【前提:父级有定位属性】)
fixed: 固定定位,配合使用top、right、bottom、left的属性,元素会脱离正常的文档流,在整个窗口进行移动定位,并拥有层级的概念。
常用场景: 1、对联广告 2、登录弹窗
fixed:脱离正常的文档流
相对于网页的四个顶点作为出始点进行移动
不受其他元素的约束
定位属性:position (脱离文档流)
position:relative; 相对定位(相对于元素本身位置进行移动)
position:absolute; 绝对定位(相对于父辈级元素有定位属性position来移动;否则以浏览器为准)
position:fixed; 固定定位(只相对于浏览器来定位;与父辈级是否有定位属性position无关)
position:inherit; 继承(只继承父级的定位属性【前提:父级有定位属性】)
fiexed,固定定位,主要用于对联广告,一致悬浮在浏览器两侧
fixed想对于屏幕固定定位,不会受夫元素影响,但absolute和relative会
fixed最自由,也就是大家最讨厌的广告窗,不受父元素约束。而绝对和相对定位受制于父元素。
fixed定位也脱离文档流,不受表准流的约束
定位属性:position (脱离文档流)
position:relative; 相对定位(相对于元素本身位置进行移动)
position:absolute; 固定定位(相对于父辈级元素有定位属性position来移动;否则以浏览器为准)
position:fixed; 绝对定位(只相对于浏览器来定位;与父辈级是否有定位属性position无关)
position:inherit; 继承(只继承父级的定位属性【前提:父级有定位属性】)
定位属性:position (脱离文档流)
position:relative; 相对定位(相对于元素本身位置进行移动)
position:absolute; 固定定位(相对于父辈级元素有定位属性position来移动;否则以浏览器为准)
position:fixed; 绝对定位(只相对于浏览器来定位;与父辈级是否有定位属性position无关)
position:inherit; 继承(只继承父级的定位属性【前提:父级有定位属性】)
定位属性:position (脱离文档流)
position:relative; 相对定位(相对于元素本身位置进行移动)
position:absolute; 固定定位(相对于父辈级元素有定位属性position来移动;否则以浏览器为准)
position:fixed; 绝对定位(只相对于浏览器来定位;与父辈级是否有定位属性position无关)
position:inherit; 继承(只继承父级的定位属性【前提:父级有定位属性】)
fixed:绝对定位