CSS中position: fixed定位后div中内容不能滚动

最新推荐文章于 2024-04-25 15:04:32 发布

原创最新推荐文章于 2024-04-25 15:04:32 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

Web前端专栏收录该内容

9 篇文章

订阅专栏

博客聚焦前端CSS问题，指出设置定位后内容不能滚动的情况，并提及将给出解决方案，围绕CSS定位与内容滚动展开信息技术相关探讨。

问题描述

div设置定位后，内容不能滚动。

解决方案

.container {
	position: fixed;
	top: 116px;
	bottom: 0px;
	overflow-x: hidden;
	overflow-y: scroll;
}

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

libraboy

关注关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【css】问题集锦

Beam

08-20

1531

一、fixed超出窗口大小部分无法滚动问题：使用fixed固定一个div，当这个div高度大于窗口高度后，超出的内容无法滚动查看。解决办法：在设置fixed的div添加样式 height:100%;overflow:auto; 即可。据说还可以设置样式 max-height:100%;overflow:auto; 即可。具体还是根据情况设置当前div的宽度，若当前div宽度是个固定值不想设置成百分数，则：可以在外层包裹一个div设置为position:fixed;height:100%;ove

CSS-position: fixed固定定位

主营前端方向，技术栈是vue

11-15

669

position: fixed固定定位(绝对定位一种，根据浏览器窗口点位不随滚动条滚动)

参与评论您还未登录，请先登录后发表或查看评论

fixed定位既然相对于屏幕视口定位，为什么在滚动时不生效

03-19

1353

当你设置一个元素为fixed定位时，它的位置会相对于浏览器窗口的可视区域进行计算。因此，无论页面如何滚动，该元素都会保持在固定的位置上，不会随滚动而移动。fixed定位是一种CSS属性，用于将元素相对于浏览器窗口进行定位，而不是相对于其父元素。它会使元素固定在屏幕上的某个位置，不会随页面滚动而改变位置。示例，给搜索框固定在网页上方，但是在鼠标向下滚动时，搜索框会消失。这是内容区域的z-index比搜索框默认的z-index大。给搜索框坐在样式加上较大的z-index即可。

解决div定位为fixed时，无法横向滚动的问题

qq_35591402的博客

11-16

2168

解决div固定定位无法横向滚动的问题

fixed定位的元素及其子元素，滚动鼠标滑轮时无法滚动！

hzxOnlineOk的博客

01-21

3452

刚碰到了一个问题，由于fixed元素是不处于文档流中的，因此，如果你的滚动容器不是html，fixed元素在非html容器中会遮住底层，此时鼠标放在fixed元素上是无法滚动容器内的内容的，所以，最好的解决方式是都以html为容器进行滚动！ <!DOCTYPE html> <html> <head> <meta charset...

position: fixed; ios 无法滑动解决

weixin_30929295的博客

03-13

737

添加以下代码搞定 -webkit-overflow-scrolling: touch; overflow-y: scroll; 转载于:https://www.cnblogs.com/cxf1992/p/10524653.html

div盒子position:fixed定位后无法滚动到页面顶部了

weixin_34235105的博客

06-13

2492

2019独角兽企业重金招聘Python工程师标准>>> ...

css中position:fixed实现div居中上下左右居中

09-25

在这段CSS代码中，首先设置了.dialog类的position属性为fixed，确保该DIV相对于视口定位。接着，通过设置top: 50%和left: 50%属性，将DIV元素的左上角定位到视口的中心位置。然后，通过设置margin负值来调整DIV元素...

css中position:fixed实现div在窗口上下左右居中

01-21

上下左右居中代码如下复制代码代码如下: div{ position:fixed;...其实，实现这个效果并不复杂，利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧：代码如下复制代码代码如下: <style typ

css 解决fixed 布局下不能滚动的问题

见贤思齐

05-07

4772

如果我们布局的是后是fixed并且想要高度为100%的时候，我们一般会这样设置： div { display:fixed; height:100%; overflow:scroll; } 但是这样并不会出现滚动条，正确的做法应该设置top和bottom为0： .fixed-content { top: 0; bottom:0; position:fixed; overflow-y:scrol...

解决position:fixed 不能左右拖动页面问题

w_xiaozhi的博客

09-01

1381

position: fixed导致元素不能左右滑动问题的解决

css 将div固定在页面顶部不随页面滑动

于坤

04-25

8729

为了将一个div设置为固定在页面顶部，不随页面滚动，可以使用几种不同的 CSS 技术来实现。

顶部导航栏fixed布局右侧不出现滚动条

IT学霸

06-07

2217

一、正常情况顶部导航栏使用fixed布局后，如果页面内容超出了屏幕高度，右侧是会出现滚动条的。效果如下：蓝色区域是顶部的导航栏区域，可以看到右侧出现了滚动条。二、CSS代码设置后如何让滚动条只出现在导航栏下面的内容区域了？原理就是使页面body元素和html根元素的高度固定为屏幕的高度。整个页面内容就不会让浏览器自动显示整个页面的滚动条，而在页面内部，只会让需要滚动的页面元素出现滚动条。这种情况下，顶部导航栏只要宽度设置为100%，计算出来的宽度就是不包含滚动条的宽度值(假如屏幕宽度

div样式position：fixed,不随屏幕滚动而滚动，导致屏幕太小时弹出层被遮挡，无法滚动查看的解决办法...

12-06

837

window.onscroll = function () { var sl = -Math.max(document.body.scrollTop, document.documentElement.scrollTop); //document.getElementsByClassName('layui-m-layerchil...

微信小程序：position: fixed导致的滚动时页面元素不跟着动的问题

测试0901-1

05-25

4071

由于对js的不熟悉，花了近半个小时才解决这个问题，现在记录下： nofixed.gif 项目需要如上图所示的一个列表页面，唰唰唰...没花多长时间就完成了,在元素较少时，不需要滚动，使用一切正常；后来添加了更多的item后，页面需要滚动，但是滚动的效果感觉莫名其妙，如下图： fixed.gif OMG？？？居然有部分元素不随着...

html为什么div移动不了,css怎么设置div不随滚动条移动？

weixin_33745224的博客

06-16

925

css怎么设置div不随滚动条移动？把一个内容固定到某一个位置，相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位 position 通常有 absolute 绝对定位，relative 相对定位，这个都是相对于body里面的块元素来说的，但是如果说想要吧某一个内容就国定在某一个位置，无论滚动条滑到哪里，他依然在浏览器窗口这个位置，就需要用到fixed了。fixed 元素框的表...

解决fixed布局里内容不滚动问题

weixin_37722222的博客

09-17

1897

//注意给父级加上 (1)横向滚动 left:0; right:0; 然后想要横向滚动的话 overflow-x:scroll; overflow-y:hidden; （2）竖直方向滚动 top:0; bottom:0; position:fixed; overflow-y:scroll; overflow-x:hidden; ...

position:fixed 失效的解决方法

简析的博客

04-11

8319

今天同事问如何固定div到某个位置，不随滚动条滚动。我一听简单，用position:fixed就行了啊。我记得position:fixed的元素相对于屏幕视口的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。结果并没有起作用，还是跟着滚动。怎么办？查！原来，在某些情况下，position:fixed会失效：当元素祖先的 transform 属性非 none ...

css样式-内容固定在页面底部，不随滚动条滚动

最新发布

11-26

<think> 我们有一个问题：使用CSS实现position:fixed基于父元素定位而非浏览器窗口的解决方案。根据引用，我们知道position:fixed通常是相对于浏览器窗口定位的。但是，用户希望它相对于父元素定位。然而，引用[2]提到：当父节点使用`transform: translate`时，在Chrome浏览器中，子元素的`position:fixed`会失效（即不再相对于视口，而是相对于父元素）。这通常被认为是一个bug，但我们可以利用这个特性来实现需求。解决方案： 1. 给父元素添加一个CSS属性：`transform`，并设置一个非`none`的值，例如`transform: translate(0, 0);`。这样，子元素使用`position:fixed`时，就会相对于这个父元素定位（在Chrome和Opera中有效，其他浏览器可能无效？）。但是，引用[2]指出在IE11、Firefox、Safari中这个行为不会发生（即子元素仍然相对于视口），所以这个方案可能不是跨浏览器的。 2. 另一种思路：不使用`position:fixed`，而是使用`position:absolute`，然后通过JavaScript监听滚动事件，动态更新位置，模拟固定定位。但这样性能较差。 3. 或者，我们可以将父元素设置为`position:relative`，然后子元素使用`position:absolute`，并设置`top`和`left`为固定值。但是，这样当父元素滚动时，子元素也会滚动。所以需要另一种方法。实际上，我们想要的是：子元素相对于父元素视口固定（即当父元素有滚动条时，子元素不随父元素的内容滚动而滚动）。这通常称为“在父元素内固定”。在CSS中，没有直接的方法可以让一个元素相对于其父元素固定（而不受父元素滚动影响）。但是，我们可以通过将父元素设置为`position:relative`，并给父元素设置一个固定的高度和`overflow:auto`（使其可滚动），然后创建一个新的层叠上下文（例如，使用`transform`）来限制固定定位的子元素。然而，根据引用[2]中提到的行为，我们可以利用`transform`属性来改变固定定位的包含块（containing block）。根据CSS规范，如果元素的祖先中的任意一个具有非`none`的`transform`属性，那么固定定位的元素将相对于该祖先定位（而不是视口）。这就是为什么在父元素上设置`transform`可以改变子元素固定定位的参照物。因此，我们可以这样实现：步骤： 1. 给父元素（希望子元素相对于它固定的元素）添加一个`transform`属性（例如：`transform: translate(0);`或`transform: scale(1);`），这样不会改变父元素的外观，但会创建一个新的包含块。 2. 然后，将子元素设置为`position: fixed;`，它的`top`、`left`等属性将相对于这个父元素。注意：这个行为在现代浏览器中（除了IE）基本都支持，因为它是CSS规范的一部分。但是，请注意，这个特性在旧版浏览器中可能不被支持。另外，引用[2]提到Chrome和Opera中会出现这个效果，而IE11、Firefox、Safari中“没有问题”（这里的问题是指这个行为，但根据规范，这是正确的行为）。实际上，现在所有现代浏览器（包括Firefox和Safari）都遵循规范：如果祖先元素有`transform`、`perspective`或`filter`属性（不为`none`），那么固定定位的元素将相对于该祖先定位，而不是视口。所以，我们可以使用以下方案： HTML结构： ```html <div class="parent"> <div class="fixed-child"> 固定于父元素的子元素 </div> 其他内容... </div> ``` CSS: ```css .parent { /* 创建一个包含块，使固定定位的子元素相对于此父元素 */ transform: translate(0); /* 或者其他非none的transform值，如scale(1) */ /* 为了演示，给父元素一些样式 */ position: relative; /* 不是必须，但如果有其他定位需求可以加上 */ height: 300px; /* 设定高度 */ overflow: auto; /* 如果需要滚动 */ border: 1px solid #ccc; } .fixed-child { position: fixed; top: 20px; left: 20px; background: yellow; } ``` 这样，`.fixed-child`就会相对于`.parent`定位，而不是整个视口。但是，请注意：这样设置后，父元素内部的滚动不会影响固定定位的子元素（它相对于父元素固定了）。如果父元素在页面上移动（比如页面滚动），那么固定定位的子元素会随着父元素一起移动（因为它相对于父元素定位），这实际上就实现了相对于父元素的固定。然而，如果父元素在页面上滚动（比如整个页面滚动），那么父元素的位置会变化，而子元素会跟着父元素一起滚动（因为它相对于父元素定位）。这不同于相对于视口的固定（页面滚动时，相对于视口固定的元素不会动）。所以，这种方法实现的是：子元素在父元素的内部固定（即父元素滚动时，子元素在父元素内的位置不变），但整个父元素在页面中滚动时，子元素会随着父元素一起滚动。这通常就是我们需要的效果：在一个可滚动的容器中，固定某个元素在容器内的位置（比如固定容器内的标题栏）。总结：通过给父元素添加`transform`属性（非`none`），可以使子元素的`position:fixed`相对于该父元素定位。注意：如果父元素有多个层级的祖先元素，且其中某个祖先也有`transform`、`perspective`或`filter`（非`none`）属性，那么子元素会相对于最近的那个祖先定位。另外，引用[4]提到固定定位偏移问题，可能与此有关。因此，使用此方法时，要注意父元素的`transform`可能影响子元素的固定定位。如果希望跨浏览器兼容，并且不依赖`transform`，可能需要使用JavaScript来模拟，但这里用户要求CSS解决方案。因此，我们推荐使用上述CSS方案。相关问题： 1. 为什么给父元素设置`transform`属性可以改变子元素`fixed`定位的基准？ 2. 除了`transform`，还有哪些属性可以创建新的包含块？ 3. 如何实现一个元素在滚动容器内固定位置？现在，我们可以根据以上思路回答用户的问题。 </think> 为了解决 `position: fixed` 基于父元素而非浏览器窗口定位的问题，以下是完整的 CSS 解决方案及注意事项： ### 核心解决方案 1. **父元素设置 transform 属性** 给父元素添加任意非 `none` 的 `transform` 值（如 `translate(0)`），强制创建新的包含块（containing block）： ```css .parent { transform: translate(0); /* 关键属性 */ position: relative; /* 确保父元素建立定位上下文 */ overflow: auto; /* 可选：控制滚动 */ height: 300px; /* 需明确高度 */ } ``` 2. **子元素使用固定定位** 子元素设置 `position: fixed`，其定位基准将变为父元素而非视口： ```css .child { position: fixed; top: 20px; /* 相对于父元素顶部偏移 */ left: 20px; /* 相对于父元素左侧偏移 */ } ``` ### 完整示例 ```html <div class="parent"> <div class="child">固定于父元素</div>  </div> ``` ```css .parent { transform: translate(0); /* 触发包含块重定义 */ position: relative; height: 300px; border: 1px solid #ccc; overflow: auto; } .child { position: fixed; top: 20px; left: 20px; background: yellow; padding: 10px; } ``` ### 关键说明 1. **浏览器兼容性** - ✅ 支持：Chrome、Firefox、Safari（现代版本） - ⚠️ 注意：需测试目标浏览器，旧版 IE/Edge 不支持此特性[^2][^4] 2. **替代方案** 若不支持 `transform`，可用以下属性替代（效果相同）： ```css .parent { filter: blur(0px); /* 或 */ perspective: 100px; } ``` 3. **滚动行为** 父元素滚动时，子元素会随父元素移动（因父元素整体位置变化），但**在父元素内部保持固定位置**。 4. **限制条件** - 父元素必须有明确尺寸（宽/高） - 避免在父元素上使用 `overflow: hidden`（会裁剪固定元素） ### 应用场景 - 页面局部区域的悬浮按钮 - 滚动容器内的固定标题栏 - 弹窗内的固定操作栏 ---