css-position 相关问题

CSS中的“position”属性允许您通过将其值设置为static（默认设置），relative，absolute，fixed或sticky来控制页面上元素的位置。

如何将绝对定位的文本置于流体相对父级中？我尝试在父元素上使用 text-align:center 但它始终将子元素的左角居中，而不是元素本身。 http://

html css css-position centering

回答 4 投票 0

假设我有一个与此类似的结构：假设我有一个与此类似的结构： <div id="list" style="width: 500px; height: 300px; overflow: auto;"> <div id="list_wrapper" style="width: 700px;"> <div class="row" style="width: 100%; height: 50px;"> <span style="display: inline-block; width: 200px;">Title</span> <span>Content</span> </div>  </div> </div> 此处的列表可以水平滚动，因为 list_wrapper 大于 list 本身。我想归档当水平滚动时，span的标题row保持粘在列表的左侧，但我不知道该怎么做。仅使用 CSS 可以实现这种行为吗？我给元素设置了背景颜色来区分它们。可以为 Title 元素赋予 position: sticky;left: 0。 <div id="list" style="width: 500px; height: 300px; overflow: auto;background:green;"> <div id="list_wrapper" style="width: 700px;background:red;"> <div class="row" style="width: 100%; height: 50px;"> <span style="display: inline-block; width: 200px;position: sticky;left: 0;background: blue;">Title</span> <span>Content</span> </div>  </div> </div>

css overflow css-position

回答 1 投票 0

如何使多个元素彼此粘在一起？

我正在尝试一种场景，其中一个标题将是粘性的，后面是粘性的子标题，然后是表标题。在这个设置中，我希望 .first 类变得粘在

html css css-position sticky

回答 1 投票 0

向右浮动改变下一个元素的位置

我有一个简单的 HTML、一个父 div 和两个子 div。当我将浮动设置为右侧的一个孩子的样式时，下一个孩子会上升并且边距顶部不适用于它，这是我不想要的。这里...

html css flexbox css-position css-float

回答 3 投票 0

如何将导航栏中的所有图标重新定位到中间

* { 填充：0；保证金：0； } 导航{ 内边距：20px；背景颜色：#809906；列表样式：无；底部边框：2px 纯黑色； } A { 颜色：黑色...

html css css-position

回答 1 投票 0

固定页眉和页内锚点与 Tripit Slate

这个问题是关于当这些 URL 是跳转目标时，获取哈希 URL（例如 mydomain.com/somepage#SomeAnchor）从固定页面标题下滚动出来。这是这个答案的一个分支

javascript css-position fixed jquery-tocify-js slate-docs

回答 1 投票 0

div 会越过粘性导航栏：relative

我正在做一个大学项目，我必须复制这个网站 https://www.orlandoweekly.com/ 到目前为止我做得很好，我只想为左侧的内容和

html css css-position

回答 1 投票 0

将 CSS 直方图条定位在 div 底部

我正在尝试使用 CSS 为我正在创建的指标表创建一个直方图小部件。在下面的代码中，直方图条形已正确创建，它们具有正确的高度，但尽管我指定...

html css css-position

回答 1 投票 0

如何使阴影覆盖具有 css 属性“相对”的组件

下面是一段简单的代码，其本质归结为：页面顶部有一个阴影，如果你垂直滚动页面，这个阴影就会一直可见，cov...

javascript html css css-position

回答 1 投票 0

使绝对定位的子项随其上升项动态调整大小

（请忽略空方块。）没有CSS视图{高度：45em; }，我得到：（位置重叠）使用 CSS 视图 { height: 45em; }，我得到：（不需要，位置不匹配）我怎样才能拥有蓝色&l...

html css css-position pdf.js pdfium

回答 3 投票 0

具有绝对定位的粘性顶部div

我使用绝对定位让 div 填满整个浏览器窗口。但是，我不想将其与有时存在有时不存在的粘性 div 结合起来。让事情变得有点

css positioning css-position sticky

回答 10 投票 0

如何设置 Bootstrap 4 toast 的宽度？

我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为位置：固定。整个吐司部分如下所示：我有一个带有 Bootstrap 4 toast 的页面，我将 toast 的位置设置为 postion: fixed。整个吐司部分是这样的： <div class="container mt-5"> <button type="button" class="btn btn-primary" id="liveToastBtn">Toast it</button> <div id="toastContainer" style="position: fixed; top: 1.5vw; right: 1vw; bottom: 4.5vw; z-index: 9;"> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <img src="..." class="rounded mr-2" alt="..."> <strong class="mr-auto">Bootstrap</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, world! This is a toast message. </div> </div> </div> </div> 您可以在 this JSFiddle 中找到完整的工作代码。该作品按原样工作得很好，但现在我想将 toast 的宽度设置为视口的 50% 左右。在 <div id="toastContainer"...> 行中，我尝试设置 width 属性： <div id="toastContainer" style="position: fixed; top: 1.5vw; width: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 或者我尝试设置left： <div id="toastContainer" style="position: fixed; top: 1.5vw; left: 50%; right: 1vw; bottom: 4.5vw; z-index: 9;"> 但在这两种情况下，出现的 toast 的 width 都不会改变（仅其水平 position）。如何设置 Bootstrap 4 toast 的宽度？我找到了办法。它也有帮助，它在网站上，我可以直接在上面尝试东西，让事情变得更容易。我不知道你是否熟悉 bootstrap 但是有这样的东西可以让你通过将 class="col-x" （x 在 1-12 之间）的东西放入 a 中来“控制”东西的长度div 与 class="row"。 <div class="row"> <button type="button" class="btn btn-primary col-8" id="liveToastBtn">Toast it</button> </div> 正如你所看到的，这就是我所做的，只需在按钮的类中添加 col-8 即可，你可以更改它，但我发现 6 看起来不像 50% 8 更接近。然后你需要一些CSS来使按钮居中: .row{ display:flex; justify-content:center; } 希望这就是您正在寻找的🥶🥶🥶🥶🥶🥶

css twitter-bootstrap bootstrap-4 css-position width

回答 1 投票 0

CSS粘性页脚，主要内容设置位置：绝对？

我有一个网站，主要内容设置为position:absolute。我已将页脚设置在页面底部，如下所示：位置：绝对；底部：0；高度：100px；宽度：100%；这我...

html css css-position

回答 1 投票 0

垂直导航栏定位问题

我正在学习 CSS，我厌倦了定位，有人可以告诉我，为什么垂直导航栏与水平导航栏重叠？我希望垂直方向具有粘性，并且内部的链接元素对于导航栏来说是绝对的，因为...

css position css-position positioning

回答 1 投票 0

如何设置 Bootstrap 4 toast 的宽度？

css twitter-bootstrap bootstrap-4 css-position width