考虑一下:
.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>
答案 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)
您仍需要设置左侧属性。如果设置正确,则不会覆盖左侧,除非您明确设置左侧,例如auto
或inherit
。如果元素同时具有左侧和右侧,则除非您将左侧设置为auto
或inherit
,否则将使用左侧。
.change1 .foo {
right:15px;
left:auto;
top:90px;
}
答案 2 :(得分:0)
.change1 .foo {
left: auto;
right:15px;
top:90px;
}