'正确'的财产不能正常运作

时间:2013-08-02 08:41:16

标签: css

考虑一下:

.foo {
           position:absolute;
           left:25px;
           top:10px;
           width:130px;
           height:55px;
        }

然后这个:

.change2 .foo {
           left:45px;
           top:90px;  
        }

这种变化就像一个魅力。但是当改为这个时(基本上从左到右切换):

.change1 .foo {
           right:15px;
           top:90px;
        }

它不起作用。问题是为什么。 整个来源:

<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>

    <title>error example</title>
    <style>
        .Body { 
            position:relative;
            padding:0;
            margin:0;
            height:400px;
            width:400px;
            border:1px dashed black;
            font-size:14px;
        }

        .foo {
           position:absolute;
           left:25px;
           top:10px;
           width:130px;
           height:55px;
        }

        .change1 .foo {
           right:15px;
           top:90px;
        }

        .change2 .foo {
           left:45px;
           top:90px;  
        }
    </style>
</head>

<body>
  <div class="Body change1">
    <div class="foo">asdsdada</div> 

    </div>
</body>
</html>

3 个答案:

答案 0 :(得分:2)

.foo {
    position:absolute;
    left:25px;  // already specified 
    top:10px;
    width:130px;
    height:55px;
}

<强>冲突

.change1 .foo {
    right:15px;
    top:90px;
    left: auto;  // reset it
}

答案 1 :(得分:1)

您仍需要设置左侧属性。如果设置正确,则不会覆盖左侧,除非您明确设置左侧,例如autoinherit。如果元素同时具有左侧和右侧,则除非您将左侧设置为autoinherit,否则将使用左侧。

Demo

.change1 .foo {
   right:15px;
   left:auto;
   top:90px;
}

答案 2 :(得分:0)

.change1 .foo {
left: auto;
right:15px;
top:90px;
}