父级fixed_CSS3--改变固定定位(fixed)的父级定位元素

css--改变固定定位(fixed)的父级定位元素

固定定位并不是只能相对 body 定位, 它的父级定位元素是可以自己设置的

MDN 原文

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

就是说如果父级设置了transform,perspective,filter且不为none,那么它的子孙元素就会相对于这个父级进行固定定位

效果示例

代码

Document

.father {

width: 400px;

height: 400px;

/* 设置transform */

/* transform: translateX(10px); */

/* 设置perspective */

perspective: 100px;

/* 设置 filter */

/* filter: grayscale(100); */

background: cyan;

}

.child {

width: 200px;

height: 200px;

background: darkgoldenrod;

}

.grand-child {

/* 孙子元素开启固定定位 */

position: fixed;

/* 定位于底部 */

bottom: 0;

width: 100px;

height: 100px;

background: darkgreen;

}

效果

可以看到孙子元素设置了 fixed 定位, 但是时相对于 father 元素定位而不是 body

父级fixed_CSS3--改变固定定位(fixed)的父级定位元素相关推荐

相对定位relative、绝对定位absolute、固定定位fixed
注:默认情况下的定位是 postion:static: 使用定位时,常常使用偏移量对位置进行描述:left.right.top.bottom 定位时,使用z-indent可以元素的堆叠顺序,例:z-i ...
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
【前端初学者】【CSS笔记】之定位：相对定位、绝对定位、固定定位、静态定位及粘性定位（上）
目录 (上篇) 一.相对定位 ( relative ) 1.1 设置方式: 1.2 相对定位元素定位的参考点: 1.3 相对定位的特点: 1.4 相对定位的举例: 二.绝对定位( absolute ) ...
html本文框百分比定位,HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点...
1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图: 以盒子中心为基准,为每条边的正方向,例: 向右移动20px : 代码为left:20px;或者right:- ...
一文读懂css【css3】绝对（absolute）定位和相对（relative）定位相对定位是相对谁定位的绝对定位又是根据谁绝对定位的子绝父相包含块
目录何为定位偏移量垂直方向 top bottom 水平方向 left right relative-相对定位何为相对定位相对定位的特点实例元素代码的起始位置元素若不开启相对定位,即便设 ...
css定位(子绝父相)
定位 ☆定位核心 -- 子绝父相 1.1 在开发中什么时候需要使用定位? 定位就是解决标准流和浮动无法实现的效果. 1.2 「定位组成」定位 = 定位模式 + 边偏移定位模式:用于指定元素的定位方 ...
固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
关于web页面布局,首先简单了解一下固定布局(fixed layout).流体布局(fluid layout).弹性布局(elastic layout).响应布局(responsive layout) ...
CSS定位—子绝父相
"子绝父相"是学习定位的口诀,这句话的意思是:子级是绝对定位的话,父级用相对定位. ①子级绝对定位,不会占有位置,可以放到父盒子里面的任何一个地方. ②父盒子需要加定位限制子盒子在 ...
html 右边是iframe 左右结构_HTML布局之左右结构，左边固定右边跟据父元素自适应...
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法...
ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...

父级fixed_CSS3--改变固定定位(fixed)的父级定位元素

父级fixed_CSS3--改变固定定位(fixed)的父级定位元素相关推荐

最新文章

热门文章