html - 将 div 定位在内容的左侧而不是页面的左侧

标签 html css

在我的网页中,我有一个 div,它在左侧保持静态,即使用户滚动也是如此。

这是 div 的 CSS:

.floatingDiv
{
    position:fixed; 
    top:300px;
    left:70px;  
    padding:16px;
}

如您所见,我将 div 定位到页面的左上角。

但是,我的主要内容只有大约 1000 像素宽,我想将此 div 放置在内容的左边缘而不是屏幕的左边缘。在我的 1440x900 分辨率下,div 当前正好位于屏幕左边缘和内容左边缘的中间位置,但如果有人使用宽屏显示器,这个 float 的 div 离内容相当远。

最佳答案

来自 Sitepoint:http://reference.sitepoint.com/css/position

fixed 值生成一个相对于初始包含 block (通常是视口(viewport))定位的绝对定位框。可以使用一个或多个属性 top、right、bottom、离开。在打印媒体类型中,该元素呈现在每个页面上。

所以你的 div 应该放在你的内容容器中,然后确保你在内容容器上有 position:relative 以便它作为所有子元素定位的引用。这与 position:absolute 相同。

<div style='position:relative'>
my main container
  <div style='position:fixed;top:300px;left:70px;'>this is my fixed element</div>
</div>

关于html - 将 div 定位在内容的左侧而不是页面的左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7918017/

相关文章:

css - 将 <div> 标记中的图像和文本对齐在同一顶行

html - Angular:在日期字段的输入类型文本中添加斜杠 "/"

javascript - 使用 jQuery 仅针对元素列表中的悬停元素

javascript - 我可以在 react 中获取元素内特定 CSS 属性的值吗?

html - Css 位置 div 给出了意想不到的结果

HTML 表格根据条件更改文本颜色

javascript - 是否有关于浏览器允许和不允许文件 : scheme URIs? 的任何综合文档

html - 边距:CSS3 中的自动属性

html - Container-Fluid 在冷的两边几乎没有填充物

html - 禁用同位素中元素的绝对位置