精华内容
下载资源
问答
  • #box{ height: 2000px;... position: absolute; top: 0; left: 0; height: 30px; background-color: red; } .root{ height: 530px; overflow: auto; } ...
                #box{
    				height: 2000px;
    				background-color: #008B8B;
    			}
    			.wrap{
    				width: 100%;
    				position: absolute;
    				top: 0;
    				left: 0;
    				height: 30px;
    				background-color: red;
    			}
    			.root{
    				height: 530px;
    				overflow: auto;
    			}
            <div class="root">
    			<div class="wrap">55555555</div>
    			<div id="box"></div>
    		</div>

    展开全文
  • 在许多情况下,position:fixed 将会失效。MDN 用一句话概括了这种情况: 当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。 What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,...

    在许多情况下,position:fixed 将会失效。MDN 用一句话概括了这种情况:

    当元素祖先的 transform 属性非 none 时,定位容器由视口改为该祖先。

    What!还有这种操作?可能有部分同学还没 get 到上面这句话的意思,通俗的讲就是指定了 position:fixed 的元素,如果其祖先元素存在非 none 的 transform 值 ,那么该元素将相对于设定了 transform 的祖先元素进行定位。

    那么,为什么会发生这种情况呢?说好的相对视口(Viewport)定位呢?

    这个问题,就牵涉到了 Stacking Context ,也就是堆叠上下文的概念了。解释上面的问题分为两步:

    任何非 none 的 transform 值都会导致一个堆叠上下文(Stacking Context)和包含块(Containing Block)的创建。

    由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。

    Stacking Context – 堆叠上下文
    好的嘛,好的嘛,又冒出新的名词了,堆叠上下文(又译作层叠上下文),又是什么?

    堆叠上下文(Stacking Context):堆叠上下文是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

    概念比较抽象,简单理解,记住 生成了 Stacking Context 的元素会影响该元素的层叠关系与定位关系。

    关于 生成了 Stacking Context 的元素会影响该元素的层叠关系 这一点,具体可以看看这篇文章 层叠顺序(stacking level)与堆栈上下文(stacking context)知多少?

    而本文提到了生成了 Stacking Context 的元素会影响该元素定位关系 。按照上面的说法,堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 viewport 定位,而是基于这个父元素。

    那么问题来了,是否所有能够生成堆叠上下文的元素,都会使得其子元素的 position:fixed 相对它,而不是相对视口(Viewport)进行定位呢?

    创建堆叠上下文的方式
    为此,首先要找到所有能够使元素生成堆叠上下文的方法。

    So,如何触发一个元素形成 堆叠上下文 ?方法如下(参考自 MDN):

    1. 根元素 (HTML),
    2. z-index 值不为 "auto"的 绝对/相对定位,
    3. 一个 z-index 值不为 "auto"的 flex项目 (flex item),即:父元素 display: flex|inline-flex,
    4. opacity 属性值小于 1的元素(参考 the specification for opacity),
    5. transform 属性值不为 "none"的元素,
    6. mix-blend-mode 属性值不为 "normal"的元素, filter值不为“none”的元素,
    7. perspective值不为“none”的元素, isolation 属性被设置为 "isolate"的元素,
    8. position: fixed 在 will-change 中指定了任意 CSS 属性,即便你没有直接指定这些属性的值
      -webkit-overflow-scrolling 属性被设置 "touch"的元素

    一探 position:fixed 失效的最终原因
    通过上面的试验,在最新的 Blink 内核下,发现并不是所有能够生成层叠上下文的元素都会使得 position:fixed 失效,但也不止 transform 会使 position:fixed 失效。

    所以,MDN 关于 position:fixed 的补充描述不够完善。下述 3 种方式目前都会使得 position:fixed 定位的基准元素改变(本文重点):

    1. transform 属性值不为 none 的元素
    2. perspective 值不为 none 的元素
    3. 在 will-change中指定了任意 CSS 属性

    不同内核的不同表现
    完了吗?没有!我们再看看其他内核下的表现。

    上面也谈到了,上述结论是在最新的 Chrome 浏览器下(Blink内核),经过测试发现,在 MAC 下的 Safari 浏览器(WebKit内核,Version 9.1.2 (11601.7.7))和 IE Trident/ 内核及 Edge 浏览器下,上述三种方式都不会改变 position: fixed 的表现!

    所以,当遇到 position: fixed 定位基准元素改变的时候,需要具体问题具体分析,多尝试一下,根据需要兼容适配的浏览器作出调整,不能一概而论。

    position:fixed 的其他问题
    当然,position: fixed 在移动端实现头部、底部模块定位。或者是在 position: fixed 中使用了 input 也会存在一些问题,这个有很多文章都描述过并且存在很多解决方案,本文不讨论这块问题。

    这方面的问题,可以看看这篇文章:移动端web页面使用position:fixed问题总结

    展开全文
  • 文章目录1、position: fixed;2、background-attachment2.0 background-attachment: fixed;2.1 scroll【背景图滚动】2.2 local【滚动元素背景图滚动】2.3 可以为多个背景图设置background-attachment3、二者区别 1、...

    1、position: fixed;

      这个固定定位应该是较为常用的定位方式,可以实现对所定义的选择器进行使用。
    相对使用更为而方便,范围更大一些。

    div{
        position: fixed;    /* 会覆盖下方的内容 */
    
        background: url(./images/bigAdvimg.png) no-repeat;
        background-attachment: fixed;/* 配合背景使用 */
    }
    
    

    2、background-attachment

    2.0 background-attachment: fixed;

    这个相对来说,没什么上场机会,如果作为body背景图片使用这个应该是可以的。
      这个属性个人觉得更像是div成为了一个可以看被固定的图片的窗口,如果全覆盖body,就相当于添加固定的背景。

    2.1 scroll【背景图滚动】

      设置background-attachment:scroll,背景图是相对于元素自身固定,内容动时背景图也动。附加到元素的border。

    Note:
      对于scroll,一般情况背景随内容滚动,但是有一种情况例外。

      对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。

    2.2 local【滚动元素背景图滚动】

      对于可以滚动的元素(设置为overflow:scroll的元素),设置background-attachment:local,则背景会随内容的滚动而滚动。

      因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。

    2.3 可以为多个背景图设置background-attachment

    body {
      background-image: url("img1.png"), url("img2.png");
      background-attachment: scroll, fixed;
    }
    

    3、二者区别

      background-attachment属性是用来声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响。position:fixed是用来定位的,作用不一样。

      background-attachment是针对背景图片来说的,而position是直接针对所定义的选择器来用的,它们所定义的对象不一样。

    展开全文
  • 上下左右 居中代码如下div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;height:150px;}如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可如果只需要上下居中,那么把 left:0; ...

    上下左右 居中

    代码如下

    div{

    position:fixed;

    margin:auto;

    left:0;

    right:0;

    top:0;

    bottom:0;

    width:200px;

    height:150px;

    }

    如果只需要左右居中,那么把 bottom:0; 或者 top:0; 删掉即可

    如果只需要上下居中,那么把 left:0; 或者 right:0; 即可

    下面附一个DIV 元素在浏览器窗口居中

    其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧:

    代码如下

    .dialog{

    position: fixed;

    _position:absolute;

    z-index:1;

    top: 50%;

    left: 50%;

    margin: -141px 0 0 -201px;

    width: 400px;

    height:280px;

    border:1px solid #CCC;

    line-height: 280px;

    text-align:center;

    font-size: 14px;

    background-color:#F4F4F4;

    overflow:hidden;

    }

    我是在窗口正中央的,呵呵!

    设置的技巧全部在这里:

    代码如下

    .dialog{

    position: fixed;

    _position:absolute; /* hack for IE6 */

    z-index:1;

    top: 50%;

    left: 50%;

    margin: -141px 0 0 -201px;

    width: 400px;

    height:280px;

    border:1px solid #CCC;

    line-height: 280px;

    text-align:center;

    font-size: 14px;

    background-color:#F4F4F4;

    overflow:hidden;

    }

    设置 position: fixed; _position:absolute;

    设置 left:50% 和 top:50%;

    设置 margin: -(DIV的offsetWidth/2) 0 0 -(DIV的offsetHeight/2)

    展开全文
  • position: fixed; 遇到 display: flex; 给下面的元素添加css样式的时, <div id="box" class="wrap"> <div class="item1"></div> <div class="item2"></div> </div> ...
  • I've successfully used the beautiful Susy grid system to create a responsive layout similiar to the one of WebDesignerWall.com:What i failed to implement is a position:fixed sidebar.Such a sidebar wou...
  • 首先看下MDN上是怎么说的:fixed: 不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时,元素会出现在的每页的固定位置。fixed 属性会创建...
  • 我想让header元素固定在页面顶部,所以加了position:fixed;,并且设置了top:0;,但是实际情况是添加完position:fixed;后,整个header就不显示了 // 用于搭建项目的框架结构 <template> <div> <...
  • 但是如果父元素的transform,perspective或filter属性不为none时,positionfixed的元素就会相对于父元素来进行定位。​​​​​​​ 如果父级元素的层级比其兄弟节点低,就算fixed的层级比父级元素及其兄弟元素高,...
  • 大家都知道,position:fixed在日常的页面布局中非常常用,在许多布局中起到了关键的作用。它的作用是:position:fixed的元素将相对于屏幕视口(viewport)的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。...
  • position: absolute;overflow: hidden; 模态框消失时去掉样式 <view class="box" :class={"fixedHeight:xxx===xxx"}> <view>内容<view> <view>弹窗<view> </view> <style&...
  • 1. 前言在写这篇文章之前,我理解的fixed元素是这样的:(摘自CSS布局基础)固定定位与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条...
  • 有些人肯定就说了,这还不简单,positionfixed;但是在ios这个坑货系统上这个positionfixed这个css属性就会失效,你懂的,苹果就是搞特殊,下面我就用css来解决这个问题。1.这个是要滑动的内容的css:.page-...
  • 我们这个官网在pc状态时也是有的,但是固定定位(position: fixed;)在pc时是没问题的,切换成移动端后,css里写了position: fixed但并没有生效,div还是会跟着滚动轴的滑动而被卷起来。 2.解决问题: ①百度后发现...
  • 使用CSS样式"position:fixed"可以使div块固定在一个固定位置,即使有滚动条也不会改变其位置。position:fixed给很多开发者带来了惊艳的效果,然而当出现水平滚动条时,效果就不那么容易接受了。有时候我们希望当出现...
  • position:fixed 实现相对于父元素定位

    千次阅读 2021-05-10 17:31:12
    position:fixed 实现相对于父元素定位 比如:中间内容区域的大小固定为1000px,对应不同的浏览器宽度,要使得某一个资源子固定在相对于内容区域的某一个位置,就不能使用 left:xxx,right:xxx这样写 position:fixed ...
  • position:fixed; top:10px; bottom:0px; left:0px; right:0px; } 设置该样式后,div不显示,但是F12是有的 解决:在样式中添加z-index:999;即可 具体div的位置根据 需要对top bottom left right进行设置 ...
  • position 是用来设置元素的位置的,fixed 是该属性的一个值。 对于英文不好的初学者,可能会弄混 fixed 和 flex,可以自行百度这两个单词的意思。 对于 absolute 和 fixed 这两个常用的属性,有一个比较有趣的地方...
  • 这是我们希望的效果,但是没法直接实现我们想让特定子元素相对于父元素"fixed"定位,也就是说,剩余的子元素不定位。那我们可以分开来想,如果添加一个祖先元素assistor,有两个祖先元素,一个用于辅助定位,一个...
  • MDN对position: fixed有一个注释: 当元素祖先的 transform 属性非 none 时,容器由视口改为该祖先。 也就是说,只要给它的随便哪个祖先设上非none的transform,问题就解决了。这祖先可以是static的,也就是说随便...
  • 问题css固定定位position:fixed很容易使用,就是相对浏览器的viewport进行定位,top:0;left:0就是在左上角。.container{width: 100px;height: 100px;background: #888;position: fixed;top: 100px;left: 100px;}当...
  • 情况:在做静态布局的时候,使用flex进行布局,将页面结构搞好了,但一旦加上position: fixed定位后,就会出现图一情况。 尝试处理:给整个需要定位的结构添加一层父容器,在父容器中进行定位,子容器进行flex布局,...
  • 这是我们希望的效果,但是没法直接实现我们想让特定子元素相e69da5e6ba9062616964757a686964616f31333363396462对于父元素"fixed"定位,也就是说,剩余的子元素不定位。那我们可以分开来想,如果添加一个祖先元素...
  • 方法1: 下方的元素第一个设置 margin-top为fixed元素的高度即可。 方法2: 在fixed元素后添加一个空的div盒子,并将高度设置为...div id="header" style="position: fixed"> //设置fixed的元素 </div...
  • ios 弹起软键盘position: fixed;失效

    千次阅读 2021-11-19 13:47:00
    <view class="stores-top"> <input type="text" placeholder-class="placeholder" v-model="shop" placeholder="店舗名または住所を入力してください" /> <... position: fixed; ...
  • 层级上下文 例如filter, translate
  • 添加代码 html, body {height:100%;overflow:auto;margin: 0;}
  • fixed属性在ie6下是无效的, 所以需要用到一种可行的解决方案, 发现在渴切css框架中,兼容IE6的定位属性fixed,固定不动样式,解决了这一问题,并且给了很详尽的描述,下面将CSS代码摘录给大家:.fixed{position:...
  • 把一个div标签,给它的属性设置position: fixed;bottom:0;固定在浏览器的最底部。这个div标签在浏览器上下滚动的时候,会一直保持在屏幕最底部,这一点没有问题。但问题是当浏览器宽度变的时候,左右移动浏览器左右...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 159,207
精华内容 63,682
关键字:

position:fixed;