マージンのあるスクリーンから離れた位置付け要素

Question

CSSでアニメーションを作成していますが、私はこの質問をしました。

margin-leftとmargin-rightのプロパティを使用して、オブジェクトを画面の左右に配置する正しい方法は何ですか？なぜなら、margin-leftを負の値に設定すると、画面外に配置されないからです。 margin-rightに何らかの正の値を設定すると、画面外に配置されることもありません。それは私が一緒にこれらのプロパティを設定した場合にのみ、私は完全に例えばのようなオブジェクトは、画面をオフに行く取得することです：

#q_what_is { /* example of setting the object off screen */ 
    margin-left: -200px; 
    margin-right: 370px; /* I left few pixels visible on purpose but setting it to -400px will put it off screen completely*/ 
} 

は、私の質問は以下のとおりです。

• 単一の設定、なぜ私は、両方のマージンを設定しなければならないのはなぜマージンは機能しませんか？
• 両方の（左右の）余白に使用する正しい値は何ですか？
• これは、アニメーションの目的でオブジェクトを画面から外す正しい方法ですか？
• この方法は、Chrome以外の他のブラウザと互換性がありますか、バグが見つかりましたか？

これは私のコードです：

.question { 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: right; 
 
    overflow: hidden; 
 
    width: 400px; 
 
} 
 

 
.question_image {} 
 

 
.answer { 
 
    display: inline-block; 
 
    float: left; 
 
    font-size: 1.5em; 
 
    max-width: 600px; 
 
    text-align: left; 
 
} 
 

 
.decor { 
 
    display: inline-block; 
 
    width: 200px; 
 
} 
 

 
.decor_image { 
 
    display: inline-block; 
 
    float: left; 
 
    vertical-align: top; 
 
    width: 200px; 
 
} 
 

 
#q_what_is { 
 
    /* example of setting the object off screen */ 
 
    margin-left: -200px; 
 
    margin-right: 370px; 
 
}

<div style="width:100%"> 
 
    <div class="question"> 
 
    <span id="q_what_is" class="question_image" style="font-size: 20em;display: inline-block;"> &#9824;</span> 
 
    </div> 
 
    <div id="q_what_is_answer" class="answer"> 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    </div> 
 
    <div id="qu_what_is_decor_container" class="decor"> 
 
    <span id="q_what_is_decor" class="decor_image" style="font-size:20em;display:inline-block">&#9827;</span> 
 
    </div> 
 
</div>

（この例では、私は容易さのためにUnicode文字で画像を置き換え）

Answer 1

あなたは間違った要素にスタイルを適用しています。内部スパンにマージン（つまりdiv.questionの内側）を設定すると、マージンはコンテナに対して設定されます。

• マージンを両方とも設定する必要はありません。
• margin-leftとmargin-rightの正しい値はhtml要素の幅に依存します。この場合、translateXは-391pxに等しくなります。
• 余白は、オフスクリーンの要素をオフセットする正しい方法です。
• 他のブラウザと互換性があります。

更新されたコード

.question { 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: right; 
 
    overflow: hidden; 
 
    width: 400px; 
 
} 
 

 
.question_image {} 
 

 
.answer { 
 
    display: inline-block; 
 
    float: left; 
 
    font-size: 1.5em; 
 
    max-width: 600px; 
 
    text-align: left; 
 
} 
 

 
.decor { 
 
    display: inline-block; 
 
    width: 200px; 
 
} 
 

 
.decor_image { 
 
    display: inline-block; 
 
    float: left; 
 
    vertical-align: top; 
 
    width: 200px; 
 
} 
 

 
#q_what_is { 
 
    /* example of setting the object off screen */ 
 
    transform: translateX(-381px); 
 
}

<div class="outer"style="width:100%"> 
 
<div class="question"> 
 
    <span id="q_what_is" class="question_image" style="font-size: 20em;display: inline-block;"> &#9824;</span> 
 
</div> 
 
<div id="q_what_is_answer" class="answer"> 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
</div> 
 
<div id="qu_what_is_decor_container" class="decor"> 
 
    <span id="q_what_is_decor" class="decor_image" style="font-size:20em;display:inline-block">&#9827;</span> 
 
</div> 
 
</div>

Answer 2

あなたは余白設定せずに、その要素にposition: relative;を使用してのみleft: -500px（または任意の値）を使用することができます。

.question { 
 
    display: inline-block; 
 
    float: left; 
 
    text-align: right; 
 
    overflow: hidden; 
 
    width: 400px; 
 
} 
 

 
.question_image {} 
 

 
.answer { 
 
    display: inline-block; 
 
    float: left; 
 
    font-size: 1.5em; 
 
    max-width: 600px; 
 
    text-align: left; 
 
} 
 

 
.decor { 
 
    display: inline-block; 
 
    width: 200px; 
 
} 
 

 
.decor_image { 
 
    display: inline-block; 
 
    float: left; 
 
    vertical-align: top; 
 
    width: 200px; 
 
} 
 

 
#q_what_is { 
 
    position: relative; 
 
    left: -500px; 
 
}

<div style="width:100%"> 
 
    <div class="question"> 
 
    <span id="q_what_is" class="question_image" style="font-size: 20em;display: inline-block;"> &#9824;</span> 
 
    </div> 
 
    <div id="q_what_is_answer" class="answer"> 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
 
    </div> 
 
    <div id="qu_what_is_decor_container" class="decor"> 
 
    <span id="q_what_is_decor" class="decor_image" style="font-size:20em;display:inline-block">&#9827;</span> 
 
    </div> 
 
</div>

を