CSS-ウィンドウのサイズを変更するとボタンが消える
NodeReact020
私のプロジェクトでは、ボタンがあります。ブラウザウィンドウのサイズを変更すると、画面の幅が1042pxに達すると、ボタンが魔法のように消えます。画面に表示されなくなったら、ブラウザの検査ツールを確認しましたが、要素はまだWebページのどこかにありますが、画面には表示されません。
HTML：
<div class ="section-1">
<button class="signupBodyBtn">Sign up free, today</button>
</div>
CSS：
.section-1 {
width: 100%;
position: relative;
height: 100vh;
background: url("https://images.paras.com/testimg/10100") no-repeat center center/cover;
}
.signupBodyBtn {
position: relative;
z-index: 2;
top: 263px;
right: 683px;
background-color: transparent;
color: white;
border-radius: 5px;
height: 60px;
width: 220px;
font-weight: bolder;
font-size: 18px;
border: 1px solid white;
}
誰かが問題を修正する方法を知っていますか？ありがとうございました。
コアリーワード
ボタンをに設定したためにボタンが消え、プロパティを要素の幅よりも大きく設定するpositionとrelative、ボタンがright親の左端に表示されます。ブラウザは、ドキュメントの上または左に表示されるものをすべて自動的にクリップします。これがビジュアルです：
赤いボックスはボタンで、灰色のボックスは親コンテナです。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
css-ウィンドウのサイズを変更すると、中央のdivトップが消えます
- 2
ウィンドウのサイズ変更時にCSSを変更するとCSSが壊れます
- 3
ウィンドウのサイズを変更するときにCSS要素が重なっている
- 4
ウィンドウのサイズを変更するときにCSSで上から画像を固定する
- 5
CSSスタイル-ブラウザウィンドウのサイズが変更されると、要素は中央に向かって移動します
- 6
ウィンドウの高さが小さい場合はcssを追加します（ウィンドウのサイズを変更するたびに）
- 7
Css：ウィンドウのサイズ変更で画像が上下に移動する
- 8
html / CSSウィンドウのサイズが変更されたときに、divを常に中央に配置する方法
- 9
幅を超える代わりにモバイルCSSサイズ変更ウィンドウ
- 10
ウィンドウサイズ変更時のCSSスタイルの変更
- 11
CSS：ウィンドウのサイズが変更されると、DIVの1つが上位に配置されます
- 12
ウィンドウのCSSに合わせてバナーのサイズを変更する必要があります
- 13
CSSウィンドウ幅のサイズ変更の問題
- 14
Googleマップのサイズ変更：マップタイプコントロールボタンのCSSスタイルが消える
- 15
CSS：ブラウザのウィンドウサイズが変更されたときに疑似要素の幅を動的に変更するにはどうすればよいですか？
- 16
ブラウザのサイズを変更すると、cssコンテナが調整されません
- 17
CSSのボタンのサイズを変更せずにフォントサイズを変更する方法
- 18
ブラウザ ウィンドウが垂直方向にスケーリングされている場合の CSS のサイズ変更の失敗
- 19
HTML / CSS：ウィンドウのサイズが変更されたときに画像の周りのテキストを合わせるにはどうすればよいですか？
- 20
ウィンドウのサイズを垂直方向に変更すると、Divコンテナが消えます
- 21
ウィンドウのサイズを変更するとテキストが消える
- 22
CSS：検索ボックスはFlexboxを使用してウィンドウサイズに基づいて自動的にサイズ変更されます
- 23
ウィンドウのサイズを変更すると、Cocoaの回転要素が消えます
- 24
ウィンドウのサイズ変更時のCSSフッターの動作
- 25
Qtでプログラムによってメインウィンドウにボタンを追加し、cssファイルを使用してボタンのスタイルを変更するにはどうすればよいですか？
- 26
ウィンドウのサイズ変更時のCSSグリッドレイアウトの奇妙な動作
- 27
CSS：テキストコンテンツを含む子要素がウィンドウサイズを拡大するのを防ぎます
- 28
CSSグリッドレイアウトを使用して、エディターペインのサイズ変更を実装できますか（CodePenなど）
- 29
ボタンのテキストのフォントサイズを変更する方法（HTML / CSS）
コメントを追加