CSSでclassが2つの場合、1つ目の一部の要素を消したい

Question

お世話になっております。
下記のようなしたい場合どうしたらよいかご教授いただければと思います。

<div class="one two">TEST</div>

.one{
 top: 10px;
 right: 10px;
}

.one.two{
 bottom: 20px;
 right: 10px;
}

この場合、htmlでは「top:10px」が反映されてしまいます。
css側の「top:10px」を消さずに「bottom:20px」を反映させたいです。

初歩的な質問で申し訳ございませんが、宜しくお願い致します。

Answer 1

position:absoluteしているということでしょうか？
であればtopとbottomは両方有効です。(高さが伸びる)
topを無効にしたいならinitialとかでよいかもしれません

<div class="one two">TEST</div>
<style>
.one{
background-Color:red;
position:absolute;
top: 10px;
right: 10px;
}
.one.two{
bottom: 20px;
right: 10px;
top:initial;
}
</style>

Comments

[pieroplus]

ご教授いただきましてありがとうございました！

Answer 2

.one.two{
 top: auto;
 bottom: 20px;
 right: 10px;
}

【top - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/top

Comments

[pieroplus]

ご教授いただきましてありがとうございました！