位置是指元素相对于其容器的位置,通常在水平轴和垂直轴上。
我想在将 div 设为绝对时控制它 我试着让它向左 30% 向右 30% 然后我给了顶部一个特定的像素,当它到达我想要的位置时它被压扁了我应该做什么......
我的 QWidget 窗口有问题,无法更新位置。 我不使用 Ui 工具。 我试过了: QRect 屏幕几何; 整数x; 整数y;
我在这个论坛的其他地方找到了这段代码,想知道如何使用导航栏获得相同的效果。 所以我会有 7 个文本链接,当你将鼠标悬停在其中一个上时,图像...
位置不起作用取决于 RecyclerView (Kotlin) 中的 getItemCount
覆盖 fun getItemCount(): Int { 返回ekipListesi.size } 重写 fun onBindViewHolder(holder: KisilerVH,position: Int) { holder.binding.kisiAdiTextView.text = ekipListesi[位置] 打印(
我使用 python flet 包已经有一段时间了,我想知道如何获取窗口的位置。有人知道吗? 我用谷歌搜索但什么也没找到。
我有一个用于具有不同结构的唯一ID代码的字符串变量,我想要i)替换特定位置处的特定字符(错误的数据输入)和ii)将最后一部分保留在...
如何在移动浏览器(ios 和 android)中固定元素位置? 元素仍然在 ios 中使用以下代码滚动< 5 and android< 4 .修复...</desc> <question vote="33"> <p>如何在<strong>移动浏览器(ios和android)</strong>中固定元素位置? 元素仍然在 ios 中使用以下代码滚动< 5 and android< 4</p> <pre><code><html> <head> <style> .fixed{ position:fixed; top:0; left:0; } </style> </head> <body> <div class="fixed"> Hi I m Position Fixed </div> <div> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> sample text<br/> </div> </body> </html> </code></pre> </question> <answer tick="true" vote="40"> <p><pre><code>position: fixed</code></pre> 在大多数旧版本的 iOS 和 Blackberry 中不起作用。我已经在大多数移动浏览器中尝试过此修复,并且无需任何 JavaScript 插件即可顺利运行。</p> <blockquote> <p>使用<a href="https://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/" rel="nofollow noreferrer"><strong><pre><code>-webkit-backface-visibility: hidden;</code></pre></strong></a></p> </blockquote> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.fixed { position: fixed; top: 0px; left: 0px; width: 320px; height: 50px; background: red; -webkit-backface-visibility: hidden; /*--^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Most Important*/ }</code></pre> <pre><code><div class="fixed"> Hi I m Position Fixed </div> <div> sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/>sample text <br/> </div></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="-4"> <p>如果它仅在移动浏览器中,并且您不需要 iOS 和黑莓的向后兼容性,您可能需要使用媒体查询。</p> <pre><code>@media only screen and (max-device-width : 730px) { .fixed { position:fixed; top:0; left:0; } } </code></pre> </answer> <answer tick="false" vote="-4"> <p>您还可以使用position:absolute来固定标题尝试..</p> <pre><code> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Web App Template</title> <style type="text/css" media="all"> body,ul,li {padding:0;margin:0;border:0;} body {font-family:helvetica;} header{background-color:#deb500;position:absolute;z-index:2;top:0; left:0;width:100%;height:45px;padding:0;} footer {background-color:#c27b00;position:absolute;z-index:2;bottom:0; left:0;width:100%;height:48px;padding:0;border-top:1px solid #444;} header, footer{font-size:20px;text-align:center;color:#f3f3f3;font-weight:bold;text-shadow:0 -1px 0 rgba(0,0,0,0.5);line-height:45px;} #wrapper {position:absolute;z-index:1;top:45px; bottom:48px; left:0;width:100%;background:#aaa;overflow:auto;} #scroll-content {position:absolute;z-index:1;width:100%;padding:0;} ul {list-style:none;padding:0;margin:0;width:100%;text-align:left;} li {padding:0 10px;height:40px;line-height:40px;border-bottom:1px solid #ccc;border-top:1px solid #fff;background-color:#fafafa;font-size:14px;} </style> </head> <body> <header>Web App Template</header> <div id="wrapper"> <div id="scroll-content"> <ul> <li>Some Stuff</li> <li>More Stuff</li> <li>Big Stuff</li> <li>Small Stuff</li> <li>Geek Stuff</li> <li>Nerd Stuff</li> <li>Fast Stuff</li> <li>Slow Stuff</li> <li>Good Stuff</li> <li>Bad Stuff</li> <li>Your Stuff</li> <li>My Stuff</li> <li>Their Stuff</li> <li>Our Stuff</li> <li>Super Stuff</li> <li>Uber Stuff</li> <li>Stuff Stuff</li> <li>French Stuff</li> <li>German Stuff</li> <li>English Stuff</li> <li>American Stuff</li> <li>Stuff</li> </ul> </div> </div> <footer>Some Footer Content</footer> </code></pre> <p></p> </answer> </body></html>
我有一个名为 VariableInput 的变量,我们将完整的 XML 存储到此 VariableInput 中。 XML 负载如下所示 我有一个名为 VariableInput 的变量,我们将完整的 XML 存储到该 VariableInput 中。 XML 负载如下所示 <MaterialList> <Material> <Number>12345678</Number> <Name>ABC</Name> <Phone>7000049851</Phone> <MID>123</MID> </Material> <Material> <Number>1111111</Number> <Name>DEF</Name> <Phone>7000049852</Phone> <MID>345</MID> </Material> <MaterialList> 现在我想使用这个 Vaeriable (VariableInput) 获取数字 1111111。请在这里帮助我 我尝试给予 $input.VariableInput/:MaterialList/:Material/*[position() = 2] 和 doc("$input.VariableInput")/MaterialList/Material/Number[2] 但没有作用 这完全取决于变量的绑定方式,例如,如果您绑定所需的元素 let $xml := <MaterialList> <Material> <Number>12345678</Number> <Name>ABC</Name> <Phone>7000049851</Phone> <MID>123</MID> </Material> <Material> <Number>1111111</Number> <Name>DEF</Name> <Phone>7000049852</Phone> <MID>345</MID> </Material> </MaterialList> return $xml/Material[2]/Number 如果您将该 XML 绑定为您需要的文档,例如 let $xml := document { <MaterialList> <Material> <Number>12345678</Number> <Name>ABC</Name> <Phone>7000049851</Phone> <MID>123</MID> </Material> <Material> <Number>1111111</Number> <Name>DEF</Name> <Phone>7000049852</Phone> <MID>345</MID> </Material> </MaterialList> } return $xml/MaterialList/Material[2]/Number 因此,您需要更好地解释在哪个环境中以及如何绑定变量以及如何键入变量。
有什么办法可以相对于它的兄弟姐妹绝对定位一个div吗?例如:在一个 div 内还有另外两个 div - div1 和 div2。我想将 div2 相对于 div1 绝对定位。
我刚开始编码一段时间,所以我尝试了w3schools中的,在我把lorem ipsum段落填入后它就工作了。它首先将h3移动到导航栏旁边,然后就结束了...
我自己是顺风CSS的初学者。所以我对如何将这个关闭图标的位置从左侧更改为右侧感到震惊。如果可能的话,你也可以帮助我吗?我试过了
我正在开发一个网站,我想设计一个图像,就像您使用背景位置:中心设计背景一样。普通图像是否有与此等效的图像? 提前致谢, 卢克 呃...
我有一些容器,它们的子容器只是绝对/相对定位的。如何设置容器的高度以便他们的孩子在里面? 这是代码: 超文本标记语言 我有一些容器,它们的子容器只是绝对/相对定位的。如何设置容器的高度以便他们的孩子在里面? 这是代码: HTML <section id="foo"> <header>Foo</header> <article> <div class="one"></div> <div class="two"></div> </article> </section> <div style="clear:both">Clear won't do.</div> <!-- I want to have a gap between sections here --> <section id="bar"> <header>bar</header> <article> <div class="one"></div> <div></div> <div class="two"></div> </article> </section> CSS article { position: relative; } .one { position: absolute; top: 10px; left: 10px; background: red; width: 30px; height: 30px; } .two { position: absolute; top: 10px; right: 10px; background: blue; width: 30px; height: 30px; } 这是一个jsfiddle。我希望“bar”文本出现在 4 个方块之间,而不是它们后面。 http://jsfiddle.net/Ht9Qy/ 有什么简单的解决方法吗? 注意,我不知道这些孩子的高度,也无法为容器设置 height: xxx。 2022 年更新。这个答案已经有近10年历史了。当它写成的时候,我们还没有像 Flex 或 Grid 这样的布局技术(那是黑暗、黑客/有趣的时代)。 值得庆幸的是,情况已经有了很大改善。 Jöcker 的回答 向您展示了如何使用 Grid 实现这种布局。如果您可以忍受不支持旧版浏览器,那就这样做吧! 原答案 如果我正确地理解了你想要做的事情,那么我认为在保持孩子们绝对定位的同时使用CSS这是不可能的。 绝对定位的元素完全从文档流中删除,因此它们的尺寸不能改变其父元素的尺寸。 如果您真的必须在保持子级为position: absolute的同时实现这种效果,您可以使用JavaScript来实现这一点,方法是在渲染后找到绝对定位的子级的高度,并使用它来设置父级的高度. 或者,只需使用 float: left/float:right 和边距即可获得相同的定位效果,同时将子级保持在文档流中,然后您可以在父级上使用 overflow: hidden(或任何其他clearfix 技术)来调整其高度扩展到其子级。 article { position: relative; overflow: hidden; } .one { position: relative; float: left; margin-top: 10px; margin-left: 10px; background: red; width: 30px; height: 30px; } .two { position: relative; float: right; margin-top: 10px; margin-right: 10px; background: blue; width: 30px; height: 30px; } 这是我的解决方法, 在您的示例中,您可以添加第三个元素 .one 和 .two 元素具有“相同样式”,但没有绝对位置且具有隐藏可见性: HTML <article> <div class="one"></div> <div class="two"></div> <div class="three"></div> </article> CSS .three{ height: 30px; z-index: -1; visibility: hidden; width:0!important; /* if you got unnecessary horizontal scroll*/ } 您可以使用网格来做到这一点: article { display: grid; } .one { grid-area: 1 / 1 / 2 / 2; } .two { grid-area: 1 / 1 / 2 / 2; } 这是一个较晚的答案,但通过查看源代码,我注意到当视频全屏时,“mejs-container-fullscreen”类被添加到“mejs-container”元素中。因此可以根据此类更改样式。 .mejs-container.mejs-container-fullscreen { // This rule applies only to the container when in fullscreen padding-top: 57%; } 此外,如果您希望使用 CSS 使 MediaElement 视频流畅,下面是 Chris Coyier 的一个很棒的技巧:http://css-tricks.com/rundown-of-handling-flexible-media/ 只需将其添加到您的 CSS 中即可: .mejs-container { width: 100% !important; height: auto !important; padding-top: 57%; } .mejs-overlay, .mejs-poster { width: 100% !important; height: 100% !important; } .mejs-mediaelement video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } 希望有帮助。 现在可以使用 Flexbox 来解决这种布局问题,避免需要知道高度或使用绝对定位或浮动来控制布局。 OP 的主要问题是如何让父级包含未知高度的子级,他们希望在特定布局内做到这一点。将父容器的高度设置为“fit-content”即可实现此目的;使用“display:flex”和“justify-content:space- Between”产生我认为OP试图创建的部分/列布局。 <section id="foo"> <header>Foo</header> <article> <div class="main one"></div> <div class="main two"></div> </article> </section> <div style="clear:both">Clear won't do.</div> <section id="bar"> <header>bar</header> <article> <div class="main one"></div><div></div> <div class="main two"></div> </article> </section> * { text-align: center; } article { height: fit-content ; display: flex; justify-content: space-between; background: whitesmoke; } article div { background: yellow; margin:20px; width: 30px; height: 30px; } .one { background: red; } .two { background: blue; } 我修改了OP的小提琴: http://jsfiddle.net/taL4s9fj/ flexbox 上的 css 技巧: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ article { position: relative; } //clear the float article::after{ content: ''; clear: both; } .one { position: relative; float:left margin-top: 10px; margin-left: 10px; background: red; width: 30px; height: 30px; } .two { position: relative; float: right; margin-top: 10px; margin-right: 10px; background: blue; width: 30px; height: 30px; } 设置元素的样式为position:absolute 顶部:0,底部:0 这是另一个迟来的答案,但我找到了一种相当简单的方法,将“条形”文本放置在四个方块之间。这是我所做的更改; 在栏部分,我将“栏”文本包裹在中心和 div 标签内。 <header><center><div class="bar">bar</div></center></header> 在 CSS 部分中,我创建了一个“bar”类,用于上面的 div 标签中。添加此后,条形文本位于四个彩色块之间的中心。 .bar{ position: relative; }
我还在学习CSS,有些东西很难理解。定位“粘性”元素存在问题。我不知道如何将它放在它的父电子的右上角...
有没有办法阻止我的蓝色栏 div 停止随机出现在页面的其他位置?
正确的情况是顶部的蓝色条,底部的蓝色条是错误的。 .main_blue_bar { 高度:20px; 宽度:100px; 背景颜色:#021199; 向左飘浮; 左边距:15...
我正在尝试设置框,以便我可以相应地添加其他元素。然而,这些框的位置会根据我使用的显示器或我是否在浏览器上进入全屏模式而不断变化。 我
我如何相对于 h1 进行定位?所以我有一个盒子,我设置了属性,id就像它的位置相对于它的父项,假设设置为文本对齐中心,那么可以说是h1。 那我想要...
如何让乌龟停止在-200,0 当我将其设置为 = -200, 0 时,它表示语法无效 最高速度(20) t.转到(-200, 0) t.color('红色') t.fillcolor('黄色') t.begin_fill() t.宽度(3) 而真实: t.fd(400) ...
我制作了带有触摸位置的播放器脚本和翻转代码来翻转播放器的运行方向我是这样制作的,但只是从0翻转。如果在x = -5上并且我触摸进入x = 2播放器则不会翻转但是
如何使用 Tailwind CSS 使 div 元素始终适合网页底部?
我希望以下 div 元素始终适合我的网页底部(即它充当我的页面的页脚)。目前已经接近底部了,但是里面还有一个黑色的空间...