css-position 相关问题

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

带有计数的“红色通知徽章”最简单的CSS

我需要显示带有计数的流行红色通知指示器,如下所示。获得跨浏览器看起来不错的东西似乎很棘手。例如,不同的浏览器似乎......

回答 7 投票 0

如何将 Div 固定到屏幕中间,但仅在 X 平面上?

所以基本上我想要一个位于屏幕中间的div,并且它固定在那里,但仅在x轴上,所以无论我向左或向右滚动,它都会保持在屏幕中间,但是当我...

回答 1 投票 0

position:absolute元素可以粘性吗?

在CSS中,position:sticky使元素能够以position:static行为显示(即它在文档流中采用其默认位置),直到它到达某个滚动位置,af...

回答 5 投票 0

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

在 Safari (Mac) 上**,当我在 Bhooks.com 上滚动时,卡片与网页的页脚和页眉重叠(位置:固定)。到目前为止我无法弄清楚为什么,我希望能找到一些帮助......

回答 3 投票 0

将div定位在底部

我想修复网页底部的这个div,这是我的反应代码: 它是用顺风CSS编写的,但你也可以用普通的CSS回答 我尝试过使用底部属性,但没有成功 <...

回答 1 投票 0

如何在CSS中将DIV右对齐、左对齐或居中对齐,而不需要绝对定位?

我想根据距容器右侧的距离、距容器左侧的距离或居中位置来定位某个 DIV;但一切都没有将其排除在流程之外,...

回答 7 投票 0

带有固定按钮的可滚动可调整大小的div

以下 HTML 显示了一个可滚动、可调整大小的 div,其中有一个按钮和一个其他内容 div。 。容器 { 宽...</desc> <question vote="0"> <p>以下 HTML 显示了一个可滚动、可调整大小的 div,其中有一个按钮和一个其他内容 div。</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; .container { width: 100%; max-width: 100%; height: 150px; position: relative; overflow: auto; resize: both; white-space: nowrap; background: lightgray; } .container .fixed { position: absolute; right: 5px; top: 5px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&#34;container&#34;&gt; &lt;button class=&#34;fixed&#34;&gt;Test&lt;/button&gt; &lt;div class=&#34;content&#34;&gt; texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>按钮应该固定在div的右上角。这对于调整大小来说效果很好,但是,当我滚动时,按钮也会移动。我该如何解决这个问题?</p> </question> <answer tick="false" vote="0"> <p>在 <pre><code>.container</code></pre> 选择器中,您有 <pre><code>overflow: auto;</code></pre>。将 <pre><code>overflow: auto;</code></pre> 移至仅针对 <pre><code>.content</code></pre> 类的选择器:</p> <pre><code>.container { width: 100%; max-width: 100%; height: 150px; position: relative; resize: both; white-space: nowrap; background: lightgray; } .container .fixed { position: absolute; right: 5px; top: 5px; } .content { overflow: auto; } </code></pre> </answer> </body></html>

回答 0 投票 0

粘性位置不起作用,这是我的css和html代码

CSS代码 我没有任何具有溢出:隐藏的父级或祖级元素。 CSS代码 我没有任何具有溢出:隐藏的父级或祖级元素。 <div class="header"> <section class="top"> <div class="links"> <ul> <li><a href="#"><i class="ri-information-2-fill"></i></a></li> <li><a href="#"><i class="ri-mail-fill"></i></a></li> <li><a href="#"><i class="ri-twitter-fill"></i></a></li> <li><a href="#"><i class="ri-facebook-fill"></i></a></li> <li><a href="#"><i class="ri-youtube-fill"></i></a></li> </ul> </div> <div class="profile"> <a href="#"> <span>Personal area</span> <i class="ri-user-3-fill"></i> </a> </div> </section> <header> <div class="wrapper"> <div class="logo-container"> <img src="logo/logo.png" alt="logo"> </div> <nav class="nav-bar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us <i class="ri-arrow-down-s-line"></i></a></li> <li><a href="#">Services <i class="ri-arrow-down-s-line"></i></a></li> <li><a href="#">Blog <i class="ri-arrow-down-s-line"></i></a></li> <li><a href="#">Contact </a></li> </ul> </nav> </div> </header> </div> 我已经尝试过其他问题中提到的方法,但它们对我不起作用。 啊啊啊啊啊aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa啊啊啊啊啊啊 首先,你的 CSS 目标是元素而不是具有 header 类的元素。我不确定这是有意还是无意。 如果这是有意的并且您只是希望元素具有粘性,那么问题是粘性元素只会粘到其父元素滚动离开屏幕为止。在您的情况下,父元素在元素下方没有任何内容,因此一旦元素到达顶部它就会滚动。在元素下方添加一些内容,您将看到它会粘住,直到您添加的内容滚动消失。也许最简单的方法是将元素向上移动一级,这样它就不会被包含在带有类标头的 div 中

回答 1 投票 0

如何固定页脚使其位于页面末尾? (CSS 打印)

我想在我的网站打印版的每一页上添加页眉和页脚,我使用了以下方法 @媒体打印{ /* 父容器 */ 表. 报告容器 { 页码-

回答 3 投票 0

下拉菜单会扭曲其他按钮

将鼠标悬停在“项目”按钮上后,我希望它向下滚动下拉菜单,而不扭曲其他按钮的大小,并同时向下推页脚。有什么帮助吗...

回答 1 投票 0

Div 元素没有到达导航栏中应有的位置

我是网络开发新手,我正在尝试为我的一个小项目制作一个导航栏,但项目没有正确对齐。有人能帮我吗?这是我得到的: 我正在努力获取这些...

回答 1 投票 0

HTML/CSS:如何将子元素放置在另一个元素之上,同时保持空间?

我有两个带有一些文本的元素: child1: '一二三四' child2: '一二' 我想像这样把child2放在child1上面。 我还希望父元素占用与 child1 一样多的空间(...

回答 1 投票 0

元素重叠忽略 z-index

我开发了一个左侧菜单,它与主要内容重叠,但主要内容的某些元素与菜单重叠,忽略了 z-index。我想问题是两个元素的相对定位......

回答 1 投票 0

CSS 绝对位置和父容器的宽度(以百分比表示)

我正在尝试构建一个宽度灵活的 HTML/CSS 下拉菜单。由于第二级导航的位置:绝对,我无法获得第一级的宽度。删除

回答 4 投票 0

Position:fixed的行为类似于react + tailwind中的position:absolute

我正在使用 React 和 Tailwind 我试图将模态置于屏幕的中心,其中主体的高度大于视口的高度,并且我需要将模态固定在屏幕的中心...

回答 2 投票 0

堆叠元素的 Z 索引问题

我有一个相当复杂的页面,其中有一个使用定位(z-index:302)的标题和一个固定侧边栏,其中包含一些弹出菜单和叠加层。问题是固定侧边栏需要

回答 1 投票 0

div 内带有滚动条且位置:固定

我有一个带有position:fixed的div,这是我的一些菜单的容器div。我将其设置为 top:0px、bottom:0px 以始终填充视口。在该 div 内,我想要另外 2 个 div,即

回答 9 投票 0

当屏幕高度大于 React 中的视口高度时,即使我使用的是position:fixed,也无法将模态在 Y 方向居中

我正在使用 React 和 Tailwind 我试图将模态置于屏幕的中心,其中主体的高度大于视口的高度,并且我需要将模态固定在屏幕的中心...

回答 2 投票 0

为什么浏览器优先考虑top和left属性而不是right和bottom属性? [已关闭]

当我尝试通过设置右侧或底部来覆盖元素的位置顶部和左侧属性时,它不起作用;看起来 left 和 top 属性是浏览器唯一关心的。 我从来没见过

回答 3 投票 0

Wordpress Tabs(WPBakery 插件)不允许固定 CSS 位置

在网页(基于 Wordpress)上,我使用 WPBakery 插件中的选项卡元素。我的页面上有多个选项卡。在其中一个选项卡上,我添加了一个表格(带有 html 元素:table、thead、tbod...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.