css-position相关内容

z-index 在表内不起作用

为什么 z-index 在表内不起作用?我有一个有 4 列的表格,其中一列位于表格之外,因此它看起来像选项卡,但我无法隐藏表格下方选项卡的右侧. 请查看此代码片段: div {位置:相对;z-索引:5;宽度:70%;保证金:自动;高度:500px;背景颜色:红色;}桌子 {边界:无;边框间距:0 11px;宽度:100%;表格布局:固定;}td.tab {背景颜色:白色;填充:15px ..
发布时间:2021-09-23 19:52:48 前端开发

位置绝对框导致容器折叠

我有 2 个带有 position:absolute 的 div,它们位于带有 position:relative 的容器内.我试图显示第一个 div .box1,同时使用绝对定位隐藏第二个 div .box2. 我可以通过容器周围的边框看到它已折叠,但我不确定我缺少什么,因此它环绕显示的内部 div. .container {边框:1px纯黑色;位置:相对;高度:100%;}.盒子 ..
发布时间:2021-09-23 19:51:39 前端开发

div 低于另一个绝对定位的 div

我在另一个具有“位置:绝对"的 div 下的 div 有问题.我需要让 footer 出现在 container div 下,但现在页脚出现在容器后面的某个地方.屏幕:(绿色背景的div是页脚) HTML: Zhlednuto.cz 首页,关于atd. ..
发布时间:2021-09-23 19:49:41 前端开发

适合父级并保持纵横比的 Div

我有一个保持纵横比的 div 元素:它根据宽度计算高度(使用填充技巧).我想要做的是将这个 div 放入另一个通过适应最大可用空间,垂直和水平,不裁剪.我认为最接近我想要的是 object-fit: contains - 仅 img. 我希望 div 在保持纵横比的同时覆盖可能的最大高度和宽度.没有垂直或水平裁剪. 仅使用 CSS 是否可行?如果是这样,如何? 更新:一篇不错的文 ..
发布时间:2021-09-23 19:46:56 前端开发

在传单地图顶部显示选择选项

我正在尝试在传单地图顶部显示一个选择标签(使用引导程序). 我已经尝试修改 css 中的 z-index,但仍然看不到 select 标签. 我错过了什么? 我的 HTML 如下: 解决方案 使 form 成为地图的兄弟,并根据需要使用 css 对其进行定位.如果您希望地图全屏显示,并在其上布置表单,请使用带有 position:relative 的公共父级来 ..
发布时间:2021-09-23 19:27:09 前端开发

为什么绝对定位的元素可以使区域可滚动?

我的理解是,一旦元素被绝对定位(即使位置值为负),它也会完全脱离正常的内容流而存在.但是为什么它仍然使页面可滚动?当您运行下面的代码片段时,会出现水平滚动条.我认为它不应该在那里. .relative {位置:相对;背景:粉色;}.绝对{位置:绝对;顶部:0;右:-100px;宽度:200px;高度:100px;背景:RGBA(0,0,0,.5);} 占位符 ..
发布时间:2021-09-23 19:24:54 前端开发

带有位置的 Bootstrap 容器:absolute 丢失内部布局

我正在针对最新的 Bootstrap 3.3.2 版开发网站.我的任务是创建导航,它位于其他内容的顶部(悬停时的简单滚动菜单).对于这个菜单,我想使用 Bootstrap 列. 要将 .container-fluid 定位在其他容器的顶部,我需要将其从标准流中移除.所以需要使用position:absolute.一旦我将它应用到 .container-fluid(或它周围的包装器),它就会失 ..
发布时间:2021-09-11 19:01:04 前端开发

如何以不同的方式排列 3 个 div 以进行响应式设计

我正在重新设计包含 3 个 div 的页面,我想让它具有响应性. 我面临的问题是大屏幕的div是按照1,2,3的顺序排列的.但是,对于响应式设计,我想将顺序更改为 1,3,2: 我尝试了不同的方法,例如将 position 更改为 relative/absolute/static 或更改 div 使用替代 CSS 代码的顺序,但到目前为止没有任何证明有效. 有什么想法可以实现这一 ..
发布时间:2021-06-18 20:16:40 前端开发

为什么翻译 div 去除溢出?

我并不完全清楚 CSS 转换如何影响文档的流布局和元素的定位.根据 MDN 和 W3C 上的文档,CSS 转换不会干扰流布局: 来自 关于 CSS 转换的 MDN(强调我的): 通过修改坐标空间,CSS 变换会改变受影响内容的形状和位置而不会中断正常的文档流程. 因此,如果我们转换一个元素,原始流布局应该保持不变,转换的结果应该是纯粹的视觉效果.下面是一个简单的例子: .c ..
发布时间:2021-06-13 19:33:25 前端开发

如何使页脚div始终位于页面内容的底部

我尝试了在这里和其他地方提到的许多不同方法,但是没有一个方法可以达到我想要的目的. 我目前在网页上使用以下代码定位和设置样式的元素.然后在其下,我要在页面内容的底部有一个页脚div(请参见下图).如果内容高度小于屏幕高度,则可以将页脚放在屏幕底部,也可以直接放在内容下方(两者都可以).如果内容大于屏幕,我希望页脚位于页面内容的底部,以便当用户向下滚动时看到页脚. 现在,我的 botto ..
发布时间:2021-04-27 19:18:51 前端开发

位置:-webkit-sticky仅在Safari(12.1.1)上的flexbox子代中向上调整容器的高度

位置:-webkit-sticky 使我的元素发粘,但直到我们向上滚动到容器的高度为止.滚动通过容器的高度后, sticky元素随页面一起滚动.这仅发生在Safari(我正在使用12.1.1版)中,并且在Chrome和Firefox中均能很好地工作. 我已经尝试过使用 self-align:flex-start 之类的修复程序,但是并不能解决我的问题. 这是代码 ..
发布时间:2021-04-27 19:17:46 前端开发

将div放置在另一个div的边框上

我正在尝试在一个用户信息框内放置一个化身和一些其他信息.我希望该头像保持在该容器的边框上,如下面的示例所示进行垂直翻译. 但是,正如您所看到的,当我翻译元素时,元素的某些部分变得不可见,因为内容没有被“按下".如何获得相同的结果,但正确显示图像?我尝试使用 position:absolute 和 top 和 bottom 进行游戏,但是我无法达到预期的效果. 注意:在我的应用中,Boo ..
发布时间:2021-04-27 19:17:43 前端开发

工具提示:位置和位置全宽(同时)

什么CSS会强制提供工具提示:- 被放置在其参考文字的正上方,并且 占据参考文本容器的整个宽度 ...同时? 默认情况下,考虑参考文本的第一个字符和最后一个字符之间的长度.如何使参考文本的最左侧和右侧边缘被视为绝对定位的子元素的长度? .tooltip {宽度:100%;保证金:0自动;/*左:0;*//*正确:0;*/位置:绝对;最高:0;转换:translateY( ..
发布时间:2021-04-27 19:17:37 前端开发

Safari的“位置:固定"在滚动上重叠

在Safari(Mac)**上,当我在 Bhooks.com 上滚动时,卡片与页脚和页眉重叠网页的位置(位置:固定).到目前为止,我仍无法弄清原因,并希望在这里找到帮助. 为了确保这一点,我还将Bootstrap升级到了最新版本. 以下是问题的屏幕截图: 此线程 请尝试让我知道它是否解决了您的问题.在检查器中进行了测试,似乎可以正常工作. ..
发布时间:2021-04-27 19:17:34 前端开发

如何相对于图片定位div?

我有一幅图像,该图像可能会根据某些动作以及要在 img 标签上 position 的几个div改变其位置. 简化代码如下: foobar 为更好地理解,想象一下我有一个图像,该图像的中心周围有一个小方块,并且无论我将图像放置在什么位置,我都希望将foobar消息放置在图像方 ..
发布时间:2021-04-27 19:17:27 前端开发

CSS位置绝对值在顶部留有空白

我想绝对定位div,但它不粘在顶部,但有空格.容器具有 position:relative ,内部块具有 position:absolute css规则.我尝试使用该代码,但发现更改背景位置会产生一些影响,我也不知道为什么. 基本信息 ..
发布时间:2021-04-27 19:17:24 前端开发