标签: css-position

如何将div中的绝对定位元素居中?

我需要在窗口的中心放置一个div(with position:absolute;)元素.但我这样做有问题,因为宽度未知.

我试过这个.但需要根据宽度的响应进行调整.

.center {
  left: 50%;
  bottom:5px;
}
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

css center css-position absolute

1034
推荐指数
21
解决办法
108万
查看次数

如何将"position:absolute"元素居中

我有一个问题集中在属性position设置为的元素absolute.有谁知道为什么图像没有居中?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

html css css-position centering

623
推荐指数
19
解决办法
74万
查看次数

固定位置但相对于容器

我正在尝试修复它,div所以它总是粘在屏幕的顶部,使用:

position: fixed;
top: 0px;
right: 0px;
Run Code Online (Sandbox Code Playgroud)

但是,div它位于一个居中的容器内.当我使用position:fixed它时,修复了div浏览器窗口的相对位置,例如它在浏览器的右侧.相反,它应该相对于容器固定.

我知道position:absolute可以用来修复相对于它的元素div,但是当你向下滚动页面时,元素会消失,并且不会像上一样粘在顶部position:fixed.

是否有实现此目的的黑客或解决方法?

css position fixed css-position

594
推荐指数
13
解决办法
82万
查看次数

中心位置:固定元素

我想position: fixed;以一个动态宽度和高度制作一个以屏幕为中心的弹出框.我用过margin: 5% auto;这个.没有position: fixed;它水平中心,但不垂直.添加后position: fixed;,它甚至不会水平居中.

这是完整的集合:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
Run Code Online (Sandbox Code Playgroud)
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
Run Code Online (Sandbox Code Playgroud)

如何使用CSS将此框置于屏幕中心?

css css-position centering

399
推荐指数
9
解决办法
54万
查看次数

即使有滚动条,也让div始终保持在页面内容的底部

CSS将Div推送到页面底部

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

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

#footer {
    position: absolute;
    bottom: 30px;
    width: 100%;
}
Run Code Online (Sandbox Code Playgroud)

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

图片: Examlple

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

css positioning css-position footer

241
推荐指数
6
解决办法
61万
查看次数

相对定位元素而不占用文档流中的空间

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

html css positioning css-position

169
推荐指数
4
解决办法
7万
查看次数

绝对定位忽略父级的填充

你如何使绝对定位元素尊重其父元素的填充?我希望内部div在其父级的宽度上伸展,并且位于该父级的底部,基本上是一个页脚.但孩子必须尊重父母的填充,而不是那样做.孩子被压在父母的边缘.

所以我想要这个:

在此输入图像描述

但是我得到了这个:

在此输入图像描述

<html>
  <body>
    <div style="background-color: blue; padding: 10px; position: relative; height: 100px;">
      <div style="background-color: gray; position: absolute; left: 0px; right: 0px; bottom: 0px;">css sux</div>
    </div>
  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

我可以通过内部div的边缘来实现它,但我宁愿不必添加它.

css css-position padding

159
推荐指数
5
解决办法
9万
查看次数

有一个固定的位置div,如果内容溢出需要滚动

我实际上有两个问题,但我们首先解决主要问题,因为我相信另一个问题更容易解决.

我在滚动的左侧有一个固定的位置div用于菜单.右侧是一个正确滚动的标准div.问题是,当浏览器视口太小而无法看到整个菜单时......没有办法让它滚动我可以找到(至少不用css).我尝试在css中使用不同的溢出,但没有任何东西使div滚动.包含菜单的div设置为min-height:100%和position:fixed ..我需要保留的两个属性.

包含菜单的div 位于另一个绝对定位且高度设置为100%的包装div内.

如果内容对于div来说太高,我怎么能让它垂直滚动?

这导致我另一个问题,我不想要滚动条显示..但我想我可能已经有了答案(只有它还没有工作,因为我不能让div滚动开始).

有解决方案吗 也许需要javascript?(我对此知之甚少)

JS小提琴示例

以及导致问题的相关代码(因为在这里发布整个东西太长了):

.fixed-content {
    min-height:100%;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;
} 
Run Code Online (Sandbox Code Playgroud)

还尝试添加高度:100%也只是为了看看是否是一个问题,但它也没有工作...也没有固定的高度,如600px.

javascript css scroll css-position overflow

139
推荐指数
4
解决办法
21万
查看次数

iOS 5固定定位和虚拟键盘

我有一个移动网站,它通过位置固定在屏幕底部的div.一切都在iOS 5中正常工作(我在iPod Touch上测试),直到我在一个带有表单的页面上.当我点击输入字段并出现虚拟键盘时,我的div的固定位置突然丢失.只要键盘可见,div就会随页面滚动.单击完成以关闭键盘后,div将恢复到屏幕底部的位置并遵循位置:固定规则.

有没有其他人经历过这种行为?这是预期的吗?谢谢.

css-position virtual-keyboard ios5

135
推荐指数
5
解决办法
7万
查看次数

在jQuery中,如何设置元素的"顶部,左侧"属性,其中位置值相对于父级而不是文档?

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

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

我试过了

$("#mydiv").css({top: 200, left: 200});
Run Code Online (Sandbox Code Playgroud)

但不起作用.

css jquery positioning css-position jquery-selectors

135
推荐指数
5
解决办法
35万
查看次数