标签: css-position

我有LI,我想淡出并重新进入.在列表项中我有一些文字.此文本绝对位于LI中.

问题是,在IE8中(IE6和7看起来很好)我可以让除了文本之外的所有东西都褪色:

http://jsbin.com/esamu/13

如果我删除文本元素上的绝对定位(在本例中为P),则IE8可以正确淡化文本:

http://jsbin.com/esamu/14

有谁知道这是为什么？有人知道修复吗？

更新:

如果文本完全定位,这似乎是IE8中的一般问题.所以,不是严格的绝对.我有预感这是由于cleartype fade bug.

我正在寻找重新创建此站点的布局:

http://prettytasty.tumblr.com/archive/

实现这一目标的唯一方法是使用绝对定位,但看起来他们正在使用javascript动态定位页面上的每个图像条目.是否有一个jquery插件或示例来实现这个或类似的东西？

我意识到javascript是你想要依赖布局的最后一件事,但我只是很好奇,并希望看到它是如何完成的.

我试图将DIV放在另一个DIV的底部.

当我将外部div的高度设置为某个绝对高度(即 - 100px)时,它可以正常工作.当它被设置为百分比或根本没有设置时 - 我无法定位它.

这是我的CSS:

#left_pane 
{
    float: left;
    margin-left: 21px;
    position: relative;
}

#bottom_pic_wrapper
{
    position: absolute;
    bottom: 0;
}

它#bottom_pic_wrapper位于内部#left_pane并且应该与其底部对齐.

任何想法为什么这对我不起作用？

谢谢 :)

右列固定位置适用于Opera和Firefox但不适用于Chrome,任何解决方案？

#rightcolumn { 
margin: 0px 0px 0px 0px;
float: right;
font-family: Arial;
font-weight: bold;
height: auto;
width: 300px;
display: inline;
position: fixed;
}

我试图将我的页脚放在页面底部,但收效甚微.

我只能粘贴链接,因为那里有很多CSS,我不知道我的问题在哪里.

所以这是链接:测试 ; 如果有人想帮助我,我会很感激.

编辑:现在的问题是老的URL是不存在了,但无论如何,当一个人需要一个脚注(或任何其他元素)定位到页面(所谓的底部的答案可能被认为是有效的粘页脚).

试图让这里显示的布局http://www.reversl.net/zindex/看起来像附加的图像澄清.....徽标(标题的一部分)需要覆盖图像.图像需要与标题的底部完美对齐.我知道这可以使用z-index实现,但我究竟能怎么做呢？

header {
width: 100%;
height: 30px;
background: #222;
position: relative;
z-index: 3000;
}

#login {
width: 30%;
float: right;
text-align: right;
padding: .5em 0;
z-index: 5000;
}

#logo {
    width: 25%;
    float: left;
    padding: 3em 3em 1em 3em;
    text-align: center;
    z-index: 9999;
    background: #222;
}

.logo-text {
font: 2em/1em "lucida grande";
display: inline-block;
color: #777;
}  

#bg {
margin: -2em 0 0 0;
clear: both;
}

我需要在页面的右下角放置一个绝对div.

.absolute{
   position: absolute;
   right:0;
   bottom: 0;
}

这是有效的,但是通过页面滚动,右/底位置不是相对于主体宽度/高度而是相对于可见区域(窗口).

body{
    min-height: 600px;
    min-width: 600px;
}

我可以用风格包装div解决这个问题,position:relative, width: 100%;但我失去了最低位置.

这就是我想要的:

我想在引导模态中修复一个元素，position: fixed但是在滚动时会随模态一起移动。我希望它即使在滚动模态后也能保持在它的位置。

这是JSFiddle。在这里，您将看到Patate文本具有position: fixedcss属性，但是如果模式很大，它将随其一起移动。我如何才能将此文本固定在其位置，以便即使滚动模式也可以将其保持在其位置。

我没有运气。请帮忙。谢谢。

我很难在每个父母div上定位儿童div.

这是css代码:

.mainDiv {
   height:500px;
   position: relative;
}

.mainDiv .parent1 {
  height: 250px;
  background-color: blue;
  top: 50px;
  position: relative;
}

.mainDiv .parent2 {
  height: 250px;
  background-color: yellow;
  position: relative;
}


.mainDiv .parent1 .sub1 {
  width: 100px;
  height: 100px;
  background-color: green;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
}

.mainDiv .parent2 .sub2 {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 50%;
}

这是小提琴

这是小提琴.我想要做的是将FontAwesome播放按钮绝对定位在图像顶部和中心.想知道是否有人曾经尝试过这个或有任何见解,试图以我能想到的方式做到这一点.

注意,我无法访问我正在处理的页面上的标记,必须是纯CSS.

.test {
  height: 500px;
  width: 100%;
}

.test:before {
  content: "\f144";
  font-family: FontAwesome;
  font-size: 80px;
  left: 50%;
  position: absolute;
  top: 50%;
}

img {
  width: 100%;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="test">
  <img src="http://placehold.it/350x150">
  <h2>Lorem ipsum dolor sit amet</h2>
  <div class="description">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis dicta quae a illo nulla, temporibus in nostrum id quia totam sint veritatis aspernatur vitae, similique labore non voluptate, dolores magnam. …