标签: positioning

我想创建一个div,它位于一个内容块下面,但是一旦页面滚动到足以接触其顶部边界,就会固定到位并与页面一起滚动.我知道我至少看过一个这样的在线例子,但我不记得它对我的生活.

有什么想法吗？

CSS将Div推送到页面底部

请查看该链接,我想要相反:当内容溢出到滚动条时,我希望我的页脚始终位于页面的完整底部,如Stack Overflow.

我有一个div id="footer"和这个CSS:

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

但它所做的只是转到视口的底部,即使向下滚动也会停留在那里,因此它不再位于底部.

图片:

对不起,如果不澄清,我不希望它被修复,只是因为它在所有内容的实际底部.

我有一个SVG,我试图以div为中心.div的宽度为900px.SVG的宽度为400px.SVG的margin-left和margin-right设置为auto.不起作用,它只是表现为左边距为0(默认值).

有人知道我的错误吗？

我正在尝试使用HTML和CSS创建一个水平的100%堆积条形图.我想使用具有背景颜色和百分比宽度的DIV创建条形,具体取决于我想要绘制的值.我还希望有一个网格线来标记图表中的任意位置.

在我的实验中,我已经通过分配CSS属性使条形水平堆叠float: left.但是,我想避免这种情况,因为它似乎以混乱的方式混淆了布局.此外,当条形浮动时,网格线似乎不能很好地工作.

我认为CSS定位应该能够解决这个问题,但我还不知道该怎么做.我希望能够指定几个元素相对于其容器左上角的位置.我经常遇到这种问题(甚至在这个特定的图形项目之外),所以我想要一个方法:

1. 跨浏览器(理想情况下没有太多的浏览器黑客)
2. 以Quirks模式运行
3. 尽可能清晰/干净,以方便定制
4. 如果可能,不使用JavaScript完成.

position()和之间有什么区别offset()？我尝试在点击事件中执行以下操作:

console.info($(this).position(), $(this).offset());

它们似乎返回完全相同的...(点击的元素在表格的表格单元格内)

如何相对定位元素,并且不占用文档流中的空间？

我使用-webkit-transform(和-moz-transform/-o-transform)来旋转div.还有固定的位置,所以div与用户一起缩小.

在Firefox中它工作正常,但在基于webkit的浏览器中,它已经破碎了.使用-webkit-transform后,固定的位置不再起作用!怎么可能？

当div悬停时,CSS过渡效果会移动div.

正如您在示例中看到的那样,问题是"转换"转换具有可怕的副作用,即使div中的图像向下/向右移动1px(并且可能稍微调整一下？)以使其显示出来的地方和焦点......

小故障似乎应用了悬浮效果的整个时间,并且从试验和错误的过程我可以肯定地说,只有当翻译过渡移动div时才会出现(框阴影和不透明度也被应用但是没有区别)删除时的错误).

第二次编辑:实际上,问题没有解决!

在创建一个JSFiddle来说明问题时,我偶然发现了一个有趣的观察结果.只有页面有滚动条时才会出现此问题.所以只有一个div实例的例子很好,但是一旦添加了相同的div,因此页面需要滚动条,问题再次出现......

有任何想法吗？!

.offset([coordinates])method设置元素的坐标,但仅相对于文档.那么我如何设置元素的坐标但相对于父元素的坐标？

我发现该.position()方法只获得相对于父级的"top,left"值,但它没有设置任何值.

我试过了

$("#mydiv").css({top: 200, left: 200});

但不起作用.

例如,我有一些类.article,我想将此类视为网格视图.所以我应用了这种风格:

.article{
  width:100px;
  height:100px;
  background:#333;
  float:left;
  margin:5px;
}

该样式将使.article看起来平铺/网格.固定高度可以正常工作.但是如果我想将高度设置为自动(根据其中的数据自动拉伸),网格看起来很讨厌.

而我想这样的观点: