css-position相关内容

“位置:粘性"如何?物业工作?

我想让导航栏在用户滚动页面后粘在视口的顶部,但它不起作用,我不知道为什么.如果你能帮忙,这是我的 HTML 和 CSS 代码: .container {最小高度:300vh;}.nav-选择{文本转换:大写;字母间距:5px;字体:18px“拉托",无衬线;显示:内联块;文字装饰:无;白颜色;填充:18px;浮动:对;左边距:50px;过渡:1.5s;}.nav-selections:hov ..
发布时间:2021-12-01 16:48:44 前端开发

了解 z-index 堆叠顺序

我对使用 z-index 来决定堆栈顺序有点困惑. 我不太明白浏览器如何处理带有 position 属性的元素和没有它的元素. 是否有一个通用规则来决定元素的堆栈顺序,无论是否明确定位元素? 感谢不同情况的示例.一般而言: 混合兄弟 有位置设置和没有位置设置. 嵌套 s与兄弟 s混合,有位置设置和没有位置设置. 解决方案 CSS 基础 z-index 属性 ..
发布时间:2021-12-01 16:43:11 前端开发

为什么底部:0 不适用于位置:粘性?

我想了解 css “sticky" 的作用.我可以让它粘在它的父母的“顶部",但不是“底部" 我的测试代码是: .block {背景:粉红色;宽度:50%;高度:200px;}.移动 {位置:粘性;底部:0;} 1111 11111 11111 11111 11111 ;11111 11111 美国AAA ..
发布时间:2021-12-01 16:38:54 前端开发

为什么在父级上应用 CSS 过滤器会破坏子级定位?

所以我有这个标题屏幕“动画"标题以全屏页面为中心,当您向下滚动时,它会变小并保持在页面顶部.这是一个具有预期行为的工作示例,我从中删除了所有不必要的代码以使其最小化: $(window).scroll(() => {“严格使用";让 windowH = $(window).height();让 windowS = $(window).scrollTop();让 header = $("#he ..
发布时间:2021-12-01 16:14:20 前端开发

固定位置但相对于容器

我正在尝试修复 div 以便它始终粘在屏幕顶部,使用: 位置:固定;顶部:0px;右:0px; 然而,div 位于一个居中的容器内.当我使用 position:fixed 时,它会相对于浏览器窗口修复 div,例如它位于浏览器的右侧.相反,它应该相对于容器固定. 我知道 position:absolute 可用于固定相对于 div 的元素,但是当您向下滚动页面时,元素消失并且不会粘住与 ..
发布时间:2021-12-01 16:10:57 前端开发

为什么具有 z-index 值的元素不能覆盖其子元素?

今天经过几个小时的调试,我艰难地学会了这条规则: 如果父元素的 z-index 为任何值,则无论您如何更改子元素的 CSS,父元素都永远无法覆盖(堆叠在其顶部)其子元素 我如何从逻辑上理解这种行为?是否符合规范? .container {宽度:600px;高度:600px;背景颜色:鲑鱼;位置:相对;z-索引:99;填充顶部:10px;}h1{背景颜色:粉红色;位置:相对;z-索 ..
发布时间:2021-12-01 15:54:15 前端开发

为什么我的绝对/固定定位元素不在我期望的位置?

我只是在学习 CSS 中的定位.根据我发现有用的文章,我开始尝试. 使用以下代码,我无法理解为什么绝对灰盒 div 在其相对父级之外.我预计灰色框将位于容器的左上角. .container {背景:浅蓝色;位置:相对;}.box-orange {背景:橙色;高度:100px;宽度:100px;位置:相对;顶部:100px;左:100px;z-索引:2;}.box-blue {背景:浅蓝 ..
发布时间:2021-12-01 13:26:46 前端开发

“transform3d"不适用于位置:固定子项

我有一种情况,在正常的 CSS 环境中,固定的 div 将准确定位在指定的位置(top:0px、left:0px). 如果我有一个具有 translate3d 转换的父级,这似乎不受尊重.我没有看到什么吗?我尝试过其他 webkit-transform,如 style 和 transform origin 选项,但没有运气. 我附上了一个 JSFiddle 的例子,我希望黄色框在页面的 ..
发布时间:2021-12-01 12:45:05 前端开发

居中对齐一个固定位置的div

我正在尝试获取一个 position:fixed 在我的页面上居中对齐的 div. 我总是能够使用这个“hack"用绝对定位的 div 来做到这一点 左:50%;宽度:400px;左边距:-200px ...其中 margin-left 的值是 div 宽度的一半. 这似乎不适用于固定位置的 div,相反,它只是将它们的最左角放置在 50% 处,并忽略了 margin-left 声 ..
发布时间:2021-11-27 08:03:45 前端开发

弹性容器中的绝对定位项仍然被视为 IE 中的项 &火狐

如果我在 flex 容器中有多个具有 justify-content: space-between 属性的元素,并且我想绝对定位其中一个元素并从 flex 流中删除,如下所示: 这在 Chrome 中有效,但在 IE 和 Firefox 中无效,因为绝对定位元素被视为 0 宽度,但仍在 flex 流中: 是否有解决方法可以保持布局不变? CodePen 解决方案 原来只需 ..
发布时间:2021-11-26 16:02:30 前端开发

CSS z-index 不起作用(绝对位置)

我正在尝试将黑色 div(相对)置于第二个黄色(绝对)之上.黑色 div 的父元素也有一个绝对位置. #relative {位置:相对;宽度:40px;高度:100px;背景:#000;z-索引:1;边距顶部:30px;}.绝对{位置:绝对;顶部:0;左:0;宽度:200px;高度:50px;背景:黄色;z-索引:0;} ..
发布时间:2021-11-26 16:01:23 前端开发

为什么绝对定位元素由其兄弟元素放置而不是放置在页面的顶角?

我不明白为什么我的绝对定位元素出现在我的 child_static div 之后.我一直认为绝对定位的元素是从流程中取出的.那么为什么 child_absolute 不覆盖 child_static div? .parent {位置:相对;}.child_static {高度:20px;背景:蓝色;}.child_absolute {位置:绝对;高度:20px;宽度:100%;背景:绿色;} ..
发布时间:2021-11-26 16:01:12 前端开发

水平滚动条出现在右侧但左侧没有溢出内容?

我在 body 中有一个 position: absolute 元素,它的某些部分 在左侧从左侧. 演示小提琴 * {溢出:可见;}#测试 {位置:绝对;高度:100px;宽度:100px;左:-50px;背景颜色:石灰;} 我希望水平滚动条应该出现,允许将文档滚动到元素的隐藏部分,但事实并非如此.所以,我对这个案例有一些疑问: 为 ..
发布时间:2021-11-26 16:00:47 前端开发

如何将绝对定位的元素居中放置在 div 中?

我需要在窗口中央放置一个 div(带有 position:absolute;)元素.但是我在这样做时遇到了问题,因为宽度未知. 我试过了.但需要调整,因为宽度是响应式的. .center {左:50%;底部:5px;} 我该怎么做? 解决方案 响应式解决方案 如果您不需要支持 IE8 及更低版本,这是一个很好的响应式设计或未知尺寸的解决方案. .center-axis-x ..
发布时间:2021-11-26 15:56:07 前端开发