positioning相关内容

Css:将嵌套元素定位在父元素边界之外一点

我有两个div,一个嵌套在另一个里面。根据页面设计,嵌套的div需要显示在父div的顶部,如: (来源:cloudfront.net) 我已经为这两个元素编写了css代码,并在嵌套的div上使用负上边距来尝试模拟所需的效果。但是,嵌套div的顶部10px左右将被截断,而不是出现在父级的边界之外,如下所示: (来源:cloudfront.net) 我不想绝对定位元素,因为此页 ..
发布时间:2022-08-19 20:55:11 前端开发

滚动到屏幕顶部后,如何使 div 贴在屏幕顶部?

我想创建一个 div,它位于内容块下方,但一旦页面滚动到足以接触其顶部边界,它就会固定在适当的位置并随页面滚动. 解决方案 您可以使用简单的 css,将您的元素定位为 固定: .fixedElement {背景颜色:#c0c​​0c0;位置:固定;顶部:0;宽度:100%;z 指数:100;} 编辑:你应该有绝对位置的元素,一旦滚动偏移到达元素,它应该被改为固定,顶部位置应该设置为零. ..
发布时间:2022-01-30 17:49:25 前端开发

(CSS) 如何在 <img> 上定位文本(带背景颜色)没有绝对定位的标签

正如标题所说 我的代码是这样的: 第一行、第二行、第三行的一些文本 容器应该有 overflow:hidden 并且我的文本会超过一行,所以我只需要我的一小部分文本出现在容器的底部,所以当用户悬停时,会出现全文. 我想在没有绝对定位的情况下将文本定位在 img 上.我尝试了负边距,但那里的文本 ..

CSS过渡效果使图像模糊/将图像移动1px,在Chrome中?

我有一些 CSS 在悬停时,CSS 过渡效果会移动一个 div. 正如您在示例中看到的那样,问题在于 translate 转换具有可怕的副作用,即使 div 中的图像向下/向右移动 1px(并且可能会一直调整大小)有点?),这样它就显得格格不入,失焦了…… 故障似乎在应用悬停效果的整个过程中都适用,并且从反复试验的过程中,我可以肯定地说似乎只在平移转换移动 div 时发生(也应用了框阴 ..
发布时间:2022-01-22 21:54:18 前端开发

使用 -webkit-transform 时固定位置不起作用

我正在使用 -webkit-transform(和 -moz-transform/-o-transform)来旋转 div.还添加了固定位置,以便 div 与用户一起向下滚动. 在 Firefox 中它可以正常工作,但在基于 webkit 的浏览器中它就坏了.使用 -webkit-transform 后,固定位置不再起作用!这怎么可能? 解决方案 经过一番研究,有一个错误报告,到目前 ..
发布时间:2022-01-16 13:54:08 前端开发

CSS下拉导航导致html内容移动

我关于 SO 的第一个问题,希望它是从头开始的,对于精通 css 艺术的人来说应该是一个简单的解决方案...... 我遇到的问题是我的 css 驱动导航的下拉部分导致其下方的内容向右移动.我发现发布了类似的问题,但我已经尝试了所有提供的解决方案,但似乎没有任何效果..... 我设法得到的最接近的方法是将 position:absolute; 添加到 #nav li:hover ul 标 ..
发布时间:2022-01-10 17:38:41 前端开发

div内的背景图像未显示

所以我在这个网站上工作,我展示了我想要的东西.在处理较低的页面横幅后,突然一切都消失了,我只剩下正文中的背景图像. 你能弄清楚为什么 topImage id 不显示吗?看到它工作一秒钟而另一秒钟不工作,真是令人沮丧: 身体{背景图像:url(“图像/背景.gif");背景重复:重复-y;背景附件:固定;背景位置:中心顶部;}#topImage{位置:绝对;背景图像:url(“ ..
发布时间:2022-01-08 13:20:44 前端开发

如何包含“溢出:自动"的宽度?动态大小的绝对 div 中的滚动条?

(关于 Stack Overflow 的第一个问题.希望我做对了.) 我正在尝试创建一个浮动菜单,该菜单从其内容继承其宽度(因为我事先不知道宽度,即从 URL 加载).我可以通过让菜单 div 绝对定位而不设置宽度或高度来做到这一点. 当内容足够高需要滚动时会出现问题.我设置了“溢出:自动;"这样它就可以垂直滚动,但新的滚动条不会使 div 变宽.相反,div 保持相同的宽度,并且滚动 ..
发布时间:2022-01-06 14:54:39 前端开发

如何仅使用 CSS 使 HTML 列表水平显示而不是垂直显示?

我需要这个是因为我想让菜单(由 HTML 列表组成)水平显示. 我不喜欢使用绝对定位,因为当我开始更改页面布局时它可能会变得混乱. 我还想删除子列表的缩进.可能吗? 解决方案 你将不得不使用类似下面的东西 #menu ul{列表样式:无;}#菜单里{显示:内联;} 第一个菜单项 第二个菜单项 第三个菜单项 ..
发布时间:2022-01-06 14:34:50 前端开发

静态定位和相对定位的区别

在 CSS 中,静态(默认)定位和相对定位有什么区别? 解决方案 静态定位是元素的默认定位模型.它们显示在作为正常 HTML 流的一部分呈现的页面中.静态定位的元素不遵守left、top、right 和bottom 规则: 相对定位允许您指定相对于元素在 HTML 流中的正常位置的特定偏移量(left、top 等).因此,如果我在 div 中有一个文本框,我可以在文本框上应用相对定位 ..
发布时间:2022-01-05 20:02:30 前端开发

“背景尺寸:包含"内的响应式 DIV 缩放图片

2015 年 1 月 1 日更新 问题: 我有一个居中的背景图像,它使用 background-size: contains 进行缩放.我想让 DIV(用于链接等)覆盖在背景上,并且在调整浏览器大小时也随所述背景缩放,但也保持相对于该背景大小的位置. 在下面提供的 Fiddle 中,红色边框显示导航栏应存在的位置,绿色边框显示“主页"按钮应存在的位置.尽可能在水平和垂直方向上调整 ..
发布时间:2022-01-04 18:34:16 前端开发

如何在 div 中居中 SVG?

我有一个 SVG,我试图将它放在一个 div 中.div 有一个宽度或 900px.SVG 的宽度为 400 像素.SVG 的 margin-left 和 margin-right 设置为 auto.不起作用,它就像左边距为 0(默认)一样. 有人知道我的错误吗? 解决方案 SVG 默认是内联的.将 display: block 添加到它,然后 margin: auto 将按预期工作 ..
发布时间:2021-12-17 17:53:54 前端开发

如何在保持比例的同时用图像填充 div?

我找到了这个帖子 — 如何拉伸图像以填充 保持图像的纵横比?——这不完全是我想要的. 我有一个特定大小的 div,里面有一个图像.我想总是用图像填充div,无论图像是横向还是纵向.而且图片被截断也没关系(div本身已经隐藏了溢出). 因此,如果图像是纵向的,我希望 width 为 100% 和 height:auto 以保持比例.如果图像是横向的,我希望 height 为 100%, ..
发布时间:2021-12-07 10:52:40 前端开发

在 Chrome 中,CSS 过渡效果使图像模糊/移动图像 1 像素?

我有一些 CSS,在悬停时,CSS 过渡效果会移动一个 div. 问题,正如您在示例中看到的那样,translate 转换具有可怕的副作用,即使 div 中的图像向下/向右移动 1px(并且可能因此调整大小)稍微?)所以它看起来不合时宜且失焦... 故障似乎在应用悬停效果的整个过程中都适用,并且从反复试验的过程中我可以有把握地说似乎只有在平移过渡移动 div 时才会发生(也应用了框阴影 ..
发布时间:2021-12-07 10:16:11 前端开发

如何创建网格/平铺视图?

例如,我有一些类 .article,我想以网格视图的形式查看这个类.所以我应用了这种风格: .article{宽度:100px;高度:100px;背景:#333;向左飘浮;边距:5px;} 该样式将使 .article 看起来平铺/网格.它在固定高度下工作正常.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很糟糕. 我想让视图像这样: 解决方案 这种类型的布局 ..
发布时间:2021-12-01 15:56:24 前端开发

滚动到屏幕后,如何使 div 粘在屏幕顶部?

我想创建一个 div,它位于内容块下方,但是一旦页面滚动到足以接触其顶部边界,就会固定到位并随页面滚动. 解决方案 您可以简单地使用 css,将您的元素定位为 已修复: .fixedElement {背景颜色:#c0c​​0c0;位置:固定;顶部:0;宽度:100%;z-索引:100;} 编辑:您应该拥有绝对位置的元素,一旦滚动偏移量到达该元素,就应该将其更改为固定位置,并将顶部位置设 ..
发布时间:2021-12-01 14:09:59 前端开发

绝对定位

我正在尝试了解定位的基础知识,并且我在互联网上遇到了这个显示特定属性的示例.本质上,他们用 CSS 创建了两个框: #box_1 {宽度:200px;高度:200px;背景:#ee3e64;}#box_2 {位置:绝对;左:100px;宽度:200px;高度:200px;背景:#44accf;} 因为绝对定位将容器放置在与其第一个父元素相关的位置,所以不应该将第二个框放置在浏览器的顶部,然后离 ..
发布时间:2021-11-26 16:07:59 前端开发