css-position相关内容
我只是在学习在css中的定位。根据我觉得有用的那篇文章,我已经开始尝试了。 使用以下代码,我无法理解为什么绝对灰盒div位于其相对父级之外。我原以为灰色框会在容器的左上角。 数据-lang=“js”数据-隐藏=“真”数据-控制台=“真”数据-巴贝尔=“假”> .container { background: lightblue; position: relative;
..
我需要显示带有计数的流行红色通知指示器,如下所示。跨浏览器获得看起来不错的东西似乎很棘手。例如,不同的浏览器对填充的处理似乎不同,导致通知看起来很奇怪。 确保通知良好显示的最佳跨浏览器方式是什么?不反对使用javascript,但纯css当然更好 推荐答案 最好的方法是使用绝对定位: /* Create the blue navigation bar */ .navbar {
..
假设我有以下HTML: .wrapper { position: relative; z-index: 99; } .red, .green { position: absolute; top: 0; left: 0; width: 100px; height: 100px; } .red { background: red;
..
我正在设计一个PhoneJS应用程序,我需要在屏幕底部放置一个按钮,但不能使用position: absolute。 为什么不只使用绝对? 由于这是PhoneJS应用程序,因此在将手机翻转到横向位置时会出现问题(请参阅下面的内容) 这是纵向(按钮放置正确) 这是横向(按钮放错地方) 不使用position: absoluteCSS属性如何完成此类任务? 推荐答案
..
我有一个高度大于屏幕尺寸的侧边栏,使用position: sticky时,只有滚动到页面末尾才能看到侧边栏的底部。 例如,我如何确保在滚动时,页面的50%已经显示了侧边栏的下部? 此处代码示例:https://jsfiddle.net/zxypmqvg/3/ .main-block { display: flex; } .sidebar { background-color:
..
In css2.1 spec,写着: 浮动框将向左或向右移动,直到其外边缘接触到包含挡路的边缘或另一个浮动的外边缘。 我想知道浮动元素的包含挡路是什么,我测试了一下: body { position: relative; margin: 5px; padding: 10px; } p { float: left; position: ab
..
标记上。为什么这里需要此绝对定位。 我也看到this,讲到这样定位的家长没有必要。 以下是教程中的代码: ul { list-style-type: none;
..
找不到此问题的解决方案。基本上,我试图实现的是,如果有比浏览器高度更多的内容,position: sticky元素将与滚动条一起显示。 我不想使用position: fixed,因为这会增加颈部疼痛。 以下是我期望它如何工作的示例: .placeholder { height: 200vh; width: 50%; float: right; } .ch
..
我想要的是在多个其他视图上显示一行(或视图)。 我已经尝试使用position: absolute、z-index,并在代码中最后一处写下我想要的东西。不幸的是,这些都不起作用。我怎样才能把这行放在最上面? 我得到的是: 代码如下:
..
我想知道为什么将div与id="pink"一起设置为自动将div移到右侧的原因。请看图片图片: HTML
aqua
yellow
pink CSS #aqua, #yellow, #pink { border:1px solid blue
..
我有一个绝对定位的megamenu,由于它的某些父元素需要position:relative,所以我必须在直接父元素上使用position:unset。这可以在Chrome和Firefox中使用,但是IE11不支持unset或initial。 我不能简单地删除所有父元素的相对位置,因为这会破坏其他东西,但我必须让megamenu相对于页面绝对定位(固定位置不起作用)。是否有可以在IE11中使
..
我只是在学习 CSS 中的定位.根据我发现有用的文章,我开始玩弄. 使用下面的代码,我无法理解为什么绝对的灰盒 div 在它的相对父级之外.我预计灰色框会在容器的左上角. .container {背景:浅蓝色;位置:相对;}.box-橙色 {背景:橙色;高度:100px;宽度:100px;位置:相对;顶部:100 像素;左:100px;z指数:2;}.box-蓝色 {背景:天蓝色;高度
..
所以我有这个标题屏幕“动画";标题居中在全屏页面上,当您向下滚动时,它会变小并保持在页面顶部.这是一个具有预期行为的工作示例,我从中删除了所有不必要的代码以使其最小化: $(window).scroll( () => {“使用严格";让 windowH = $(window).height();让 windowS = $(window).scrollTop();让 header = $("#
..
..
我在将属性 position 设置为 absolute 的元素居中时遇到问题.有谁知道为什么图片不居中? body {文本对齐:居中;}#slideshowWrapper {边距顶部:50px;文本对齐:居中;}ul#slideshow {列表样式:无;位置:相对;边距:自动;}ul#slideshow li {位置:绝对;}ul#slideshow li img {边框:1px 实心#cc
..
我正在尝试通过制作一个益智程序来提高我对 Java 的理解,尤其是 Java GUI.当前,用户选择一个图像,该图像被切割成指定数量的块.这些碎片是随机绘制到屏幕上的,但它们似乎被其他碎片的空白部分覆盖,并不是所有的都显示出来,但我可以打印出所有的坐标.我正在使用绝对定位,因为 LayoutManager 似乎不起作用.我短暂地尝试了 layeredPanes,但他们让我感到困惑,似乎并没有解决问
..
我有一位客户想向在其网站上注册的人发送礼券.他们希望一切都设计好,所以我不能只发送文本电子邮件.我正在尝试将文本放置在图像上,以便它仍然可以是动态的. 我正在尝试使用绝对定位来做到这一点.一些电子邮件系统喜欢它.有些人讨厌它.Gmail 碰巧讨厌它. 我们将 MailChimp 用于该活动.这是电子邮件的完整来源.紧随其后的只是不起作用的代码段.
..
我们使用 WPF WebBrowser 控件来显示嵌入页面.在 Windows 8 上,我们观察到具有 css position:fixed 的元素在滚动时出现奇怪的跳跃行为. 同一页面在 Windows 8 上的 IE10(还有 FF、Chrome)和 Windows 7 上的 WPF WebBrowser 控件中运行良好. 以前有没有人见过这种行为并知道如何解决跳跃动作? 与
..
我有以下两个总宽度应为 1400 像素的容器.我的代码中的问题是,当我希望两个容器为 1400 像素时,背景不是 100% 宽度. 我怎样才能以最好的方式实现这一目标?我希望你们能解决我的问题. 我正在使用以下代码: .wrapper {最大宽度:1400px;边距:0 自动;填充:0 50px;}#左容器{宽度:50%;背景:蓝色;向左飘浮;}#right-容器{宽度:50%;
..
我正在使用 Twitter Bootstrap 来设计一个 iPad 优化网站的样式,并且在 iOS5 上的 Mobile Safari 中遇到了一个有趣的错误. 点击固定位置导航栏中的锚链接后,它会正确地将我带到该锚点.但是,在滚动页面之前,我无法单击导航栏中的任何其他链接. 问题似乎出在 Bootstrap 本身,因为 Bootstrap 站点也有同样的问题:http://twit
..