css-position 相关问题

如何使响应成为绝对位置？

我在图像上制作了一个地图标签，当点击地图的特定部分时，它会将用户带到一个特定的 URL，因此它可以在大屏幕上工作，但在中小屏幕上，ab 的位置...

如果滚动的元素本身不粘，如何使滚动条变粘

我有一张超出视口高度的大桌子。该表可水平滚动，因此表底部有水平滚动条。但是滚动条不可见...

为什么 <TextInput> 在 React Native 中的绝对定位父容器 <View> 中无法聚焦？

我有一个位于视图内部的 TextInput 组件，其样式设置为位置：“绝对”： const [searchTerm, setSearchTerm] = useState('测试'); 返回 （ 我有一个 TextInput 组件，它位于 View 内，样式设置为 position: "absolute": const [searchTerm, setSearchTerm] = useState('Test'); return ( <View style={{position: "absolute"}}> <TextInput autoFocus={true} value={searchTerm} onChangeText={text => setSearchTerm(text)} /> </View> ) 设置此样式后，即使我可以看到输入字段和默认文本（TextInput），我也无法聚焦或与autoFocus={true}（包括Test）进行任何交互。一旦我删除了绝对定位，我就可以像往常一样使用TextInput。 这种行为的原因是什么？ （使用安卓） 你应该添加zIndex:400或一些对我有用的高数字 这里解释了这个问题的根本原因：长按选择和按下移动光标在位置上不起作用：'absolute'TextInput outside parent bounds on Android 解决方案是您可能需要更改position: 'absolute' 视图的父级，以便其边界包含位置绝对视图。该父视图不在您的代码示例中，因此父视图在另一个组件中。

CSS位置错误：相对，位置：绝对等

我正在尝试制作一个投资组合网站。但是，我遇到了 CSS 定位错误。我想知道，将图像保存在“容器”内，这样我就可以将它居中，我如何

如何将外部 div 覆盖在内部 div 上？

如何将蓝色 div 覆盖在黄色 div 上？我试图向外部 div 添加一个相对位置，但我没有工作。 .c1{ 填充：25px； 背景：蓝色； 位置：相对； 顶部：...

CSS Positioning 和 CSS Margin 的区别

今天学习了CSS中的两个概念，一个是CSS定位（static, relative, absolute, fixed），另一个是CSS Margin，它定义了元素之间的空间。 假设我想移动一个

使所有 HTML 元素对其父元素始终是绝对的 [关闭]

我不知道定位是如何工作的，也无法在互联网上找到任何关于我的问题的信息，所以我问你：如何使用 css 使所有 HTML 元素对它们的父元素始终是绝对的？ ...

如何固定 iframe 的位置，使其在滚动时也更改其 TOP 级别？

我想固定 iframe 元素的位置。问题是，如果我保持位置“STICKY”，它也会覆盖空间并推动下面的元素。所以，最好的价值是'ABS ...

滚动时，文本留在背景后面不可见。滚动时如何使文本保持固定？

滚动时，“Hikayen Gülümsemen”文本位于背景后面，不可见。 .轮播项目{ 身高：70rem； 背景...</desc> <question vote="-1"> <p><a href="https://i.stack.imgur.com/zfxki.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL3pmeGtpLnBuZw==" alt=""/></a></p> <p>“Hikayen Gülümsemen”文本在滚动时，文本留在背景后面并且不可见。 <a href="https://i.stack.imgur.com/n2POx.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL24yUE94LnBuZw==" alt=""/></a></p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>&lt;style&gt; .carousel-item { height: 70rem; background-color: black; position: relative; color: black; background-position: center; background-size: cover; } .containerx { margin-left: -121px !important; margin-top: 400px !important; position:fixed; z-index:-2; } a:hover{ text-decoration:none !important; color:black !important; } /* a:hover { text-decoration:none !important; }*/ a{ text-decoration:none !important; } .v-light .dsn-slider .wrapper { background-color: #090909; } a{ color:white !important; } body { color: rgba(255, 255, 255, 0.69) !important; font-weight: 500 !important; font-family: &#34;Montserrat&#34;, sans-serif; } .main-root{ background-color:black; } h3{ font-weight:700; font-size:35px; line-height:1.2; } @@media(min-width:1200px) { .container { max-width: 1140px; } } &lt;/style&gt;</code></pre> <pre><code>&lt;div class=&#34;dsn-root-slider&#34; id=&#34;dsn-hero-parallax-img&#34; style=&#34;background-color:black;&#34;&gt; &lt;div class=&#34;slide-inner&#34;&gt; &lt;div class=&#34;wrapper&#34;&gt; &lt;div class=&#34;slide-content&#34;&gt; &lt;div id=&#34;myCarousel&#34; class=&#34;carousel slide carousel-fade&#34; data-ride=&#34;carousel&#34;&gt; &lt;!-- Indicators --&gt; &lt;ol class=&#34;carousel-indicators&#34;&gt; &lt;li data-target=&#34;#myCarousel&#34; data-slide-to=&#34;0&#34; class=&#34;active&#34;&gt;&lt;/li&gt; &lt;li data-target=&#34;#myCarousel&#34; data-slide-to=&#34;1&#34;&gt;&lt;/li&gt; &lt;li data-target=&#34;#myCarousel&#34; data-slide-to=&#34;2&#34;&gt;&lt;/li&gt; &lt;/ol&gt; &lt;!-- Wrapper for slides --&gt; &lt;div class=&#34;carousel-inner&#34;&gt; &lt;div class=&#34;carousel-item active&#34; style=&#34;background-image:url(Content/assets/Images/bg/pianoDentalClinic_slide1-1.jpg)&#34;&gt; &lt;div class=&#34;containerx&#34;&gt; &lt;div class=&#34;title-text-header&#34;&gt; &lt;div class=&#34;title-text-header-inner&#34; style=&#34;font-weight:500; color:white;&#34;&gt; &lt;a href=&#34;#&#34; class=&#34;effect-ajax sloganBg&#34; data-dsn-ajax=&#34;slider&#34; style=&#34;color:white !important;&#34;&gt; @(&#34;Hikayen&#34;.ToGecerliDileCevir()) @(&#34;Gülümsemen&#34;.ToGecerliDileCevir()) &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;link-custom&#34;&gt; &lt;a href=&#34;@Url.Action(&#34;Ekle&#34;, &#34;Randevu&#34;, new { area = &#34;Kayit&#34; })&#34; class=&#34;image-zoom &#34; data-dsn=&#34;parallax&#34; style=&#34;background-color: transparent; border: 1px solid rgba(112, 112, 112, 0.5);&#34; data-dsn-ajax=&#34;slider&#34;&gt; &lt;span&gt;@(&#34;RANDEVU İÇİN TIKLAYINIZ&#34;.ToGecerliDileCevir()).&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;carousel-item item&#34; style=&#34;background-image:url(Content/assets/Images/bg/pianoDentalClinic_slide2.jpg)&#34;&gt; &lt;div class=&#34;containerx&#34;&gt; &lt;div class=&#34;title-text-header&#34;&gt; &lt;div class=&#34;title-text-header-inner&#34;&gt; &lt;a href=&#34;#&#34; class=&#34;effect-ajax sloganBg&#34; data-dsn-ajax=&#34;slider&#34; style=&#34;color:white !important;&#34;&gt; @(&#34;Hikayen&#34;.ToGecerliDileCevir()) @(&#34;Gülümsemen&#34;.ToGecerliDileCevir()) &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;link-custom&#34;&gt; &lt;a href=&#34;@Url.Action(&#34;Ekle&#34;, &#34;Randevu&#34;, new { area = &#34;Kayit&#34; })&#34; class=&#34;image-zoom &#34; data-dsn=&#34;parallax&#34; style=&#34;background-color: transparent; border: 1px solid rgba(112, 112, 112, 0.5);&#34; data-dsn-ajax=&#34;slider&#34;&gt; &lt;span&gt;@(&#34;RANDEVU İÇİN TIKLAYINIZ&#34;.ToGecerliDileCevir()).&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Left and right controls --&gt; &lt;div class=&#34;slider-arrow-left&#34;&gt; &lt;a class=&#34;carousel-control-prev&#34; href=&#34;#myCarousel&#34; data-slide=&#34;prev&#34;&gt; &lt;span class=&#34;carousel-control-prev-icon&#34; aria-hidden=&#34;true&#34;&gt;&lt;/span&gt; &lt;span class=&#34;sr-only&#34;&gt;Previous&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div class=&#34;slider-arrow-right&#34;&gt; &lt;a class=&#34;carousel-control-next&#34; href=&#34;#myCarousel&#34; data-slide=&#34;next&#34;&gt; &lt;span class=&#34;carousel-control-next-icon&#34; aria-hidden=&#34;true&#34;&gt;&lt;/span&gt; &lt;span class=&#34;sr-only&#34;&gt;Next&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;dsn-slider-content&#34;&gt;&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>我很努力，你能帮帮我吗？<br/> 进行滚动或更改变换时，文本应保持固定，但其中的一部分不会出现。 Position 固定后，当页面固定时，无需滚动即可看到整个文本，但在滚动时则不可见。</p> </question> <answer tick="false" vote="0"> <p>这里没有足够的信息让我确定如何修复它，但你可以尝试使用 z-index 来操纵自然堆叠顺序。</p> <pre><code> .containerx { margin-left: -121px !important; margin-top: 400px !important; position:fixed; z-index: 1; } </code></pre> </answer> <answer tick="false" vote="-1"> <p>当 dsn-root-slider 转换更改文本时不显示</p> <p><a href="https://i.stack.imgur.com/czcY8.png" target="_blank"><img src="https://cdn.imgupio.com/i/AWkuc3RhY2suaW1ndXIuY29tL2N6Y1k4LnBuZw==" alt=""/></a></p> </answer> </body></html>

什么是 CSS 中的“边界框”？

我是 css 的新手，遇到了一个问题，我的“margin: auto;”不适用于“位置：绝对”。我找到的一个答案是谈论元素的边界框。我有攻击......

文本分割与动画一起居中

原则上，我想做下面概述的事情。该页面有两种可能的状态。在第一个中，两个文本（它们的长度可能不同）作为标题居中。对于第二个状态，

Android 浏览器的位置：修复和 z-index 问题

让我分享一个例子以更好地说明： jsFiddle：http://jsfiddle.net/yhurak3e/ 或者你可以在这里阅读： HTML: box1 box2 ... 让我分享一个例子以更好地说明： jsFiddle： http://jsfiddle.net/yhurak3e/ 或者您可以在这里阅读： HTML： <div id="box1">box1</div> <div id="box2">box2 <div> <div id="box4">box4</div> </div> </div> <div id="box3">box3</div> CSS： #box1 { width: 100%; height: 40px; position: fixed; top: 0; left: 0; background: green; z-index: 5; } #box2 { height: 300px; position: relative; background: yellow; } #box3 { height: 100%; width: 100%; left: 0; top: 0; position: fixed; background: black; opacity: .8; z-index: 10; } #box4 { left: 20px; top: 20px; right: 20px; bottom: 20px; position: fixed; background: blue; z-index: 11; } 在所有其他浏览器中，#box4（蓝色的）出现在其他元素的顶部，除非我将 z-index 属性赋予其中一个锚点。这是预期的结果。 在 Android 的默认浏览器（在 4.1 上测试）中，#box4 位于#box1 和#box3 之下。 有人知道解决它的 CSS 解决方法吗？ 谢谢！ 来自 this 线程的类似问题的解决方法是应用 -webkit-transform:translateZ(0); 到#box4. 您必须在 parent 元素或 #box4 的元素上应用上述解决方法，同时将 -webkit-transform:translateZ(0); 应用于 #box4，如下所示： #box1 { width: 100%; height: 40px; position: fixed; top: 0; left: 0; background: green; z-index: 5; } #box2 { height: 300px; position: relative; background: yellow; } #box3 { height: 100%; width: 100%; left: 0; top: 0; position: fixed; background: black; opacity: .8; z-index: 10; } #box4 { left: 20px; top: 20px; right: 20px; bottom: 20px; position: fixed; background: blue; z-index: 11; } #box1, #box2 { /*parent*/ -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden; } #box4 { /*child*/ -webkit-transform: translateZ(0); /* Chrome, Safari, Opera */ transform: translateZ(0); } <div id="box1">box1</div> <div id="box2"> box2 <div> <div id="box4">box4</div> </div> </div> <div id="box3">box3</div>

如何在视口的右端放置一个div？

我想将 div 定位到右侧并超出视口。它还必须响应。我只是想向 div 添加水平滚动动画。 Out 一定是这样的 enter image

Top in position relative 没有按预期工作

当标签 与 同级时，为什么 的 top 属性不起作用，但是如果我删除标签 ，这会起作用。 网页, 身体 { 高度：100%； } 图片 { 位置... 为什么 <img> 的顶级属性不起作用，当标记 <img> 与 <p> 同级时，但是如果我删除标记 <p>，这有效。 html, body { height: 100%; } img { position: relative; top: 40%; } <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus delectus accusantium nulla eveniet aperiam, quo odit qui voluptas. Illo vel sed ex dolores illum eum architecto a libero atque. Voluptatibus.</p> <img src="http://lorempixel.com/400/200/" alt=""> http://jsfiddle.net/9bxwxfe2/ 使用容器div设置为position: relative;然后添加position: absolute;到img. CSS: html,body{ height: 100%; } img{ position: relative; top: 40%; float:left; } 使用浮动：左；在 img 类中。这将解决问题，图像将显示在预期位置（距离屏幕顶部 40%）。 当该值以百分比形式提供时，它是相对于包含块的高度。 但是img没有包含块。你可以添加position: absolute;到img. CSS： img{ position: absolute; top: 40%; } 这可以帮助你... 我的建议是使用 px 而不是 %。它工作正常。 html,body{ height: 100%; } img{ position: relative; top: 40px; } https://jsfiddle.net/vy301c07/ 为 p 标签添加 float:left 新的CSS， html,body{ height: 100%; } img{ position: relative; top: 40%; } p { float:left } 见 jsfiddle

如何使用位置固定和绝对[关闭]

我创建了一个始终固定在屏幕顶部的导航栏，所以我使用了一个固定位置，但沿着页面我不得不使用一些相对于某些卡片的位置。当顶部菜单滚动时

两个固定位置元素引发一些问题

当我尝试添加位置时：固定； CSS 中两个元素的规则，:hover 不适用于第一个元素的子元素。为什么会发生这种情况，我该如何解决？ 我知道问题是...

父元素未定位时根据父元素的绝对位置

我知道一个元素 position: absolute 被移出正常流并定位到其最近的定位祖先，或初始包含框。 但是在下面的代码中...

当您在导航栏的搜索框中键入内容时，搜索框会更改位置

这是一个关于它看起来如何的视频视频 我试着把它改正，但我做不到。我很困扰。据我所知，当电影名称出现在屏幕上时，搜索按钮位于导航栏上方。我...

如何将元素定位在相关元素旁边

我的导航栏在标记上看起来像这样 我希望我的销售文本与其他菜单项对齐，而图标的大小可以不同 任何提示如何达到预期的结果？我试过...

CSS 滚动位置

师兄们好，我是网页设计新手。在下面的代码中，当我向下滚动时，黄色容器工作正常（即在导航栏下方移动）。但是红色容器正在滚动...