TIL 008 | CSS Position
「position」プロパティを使用して、要素を目的の場所に配置できます.横置き用の「float」とは異なり、自由度の高い「position」を整理してみましょう.
Position
2 表示値はブロックに変更されますが、空き領域は自動的に埋め込まれません. 2 この点を覚えておくと、
(ボタンアイコンの上半部を基準に中央に調整されているので、アイコンの頂点を中央に置きます.)
2つ目のケースは
Position
1. Static
基本的に、要素はstaticの状態を有する.特に変化がない場合は自分の位置に固定します.
(画像ソース:キムバーグのCSSは面白いです。)
2. Relative
position : relativeを有する要素については、自分の元の位置に応じて位置を調整することができる..red{
position:relative;
top:20px;
left:20px;
}
図に示すように、元の位置から20 pxを上に移動し、左から20 pxを移動した.
3. Absolute
position : absoluteの要素は、元の場所にかかわらず、導入したいときに使用されます.しかし、少し注意しなければならないことがあります.
.red{
position:relative;
top:20px;
left:20px;
}position : absoluteの要素を有する祖先要素において、positionは非静的要素に従って位置決めされ得る.floatと同様に、親要素は子要素の高さ値を計算できません.position : absoluteはレイアウト上非常に便利な特性です..parent{
position: relative;
}
.child-red{
position: absolute;
top: 20px;
left: 20px;
} 4. Fixed
position : fixedの要素がビューポートを基準に位置を調整します.ここでviewportとは、現在のユーザーが表示している画面を指します.画面が変化しても、固定位置が必要なモデルウィンドウやmenuなどを使用できます.5.簡単な実習例
1)
<!-- html -->
<body>
<div class="card">
<div class="card-carousel">
<img src="./assets/img-card.jpg" alt="그랜드캐년" />
<button type="button" aria-label="이전" id="prev"></button>
<button type="button" aria-label="다음" id="next"></button>
</div>
<div class="card-content">
<h1>
그랜드캐년+앤텔롭+홀슈밴드 자유일정
</h1>
<span>
김버그트래블
</span>
<strong>
<span>
1인
</span>
180,000원
</strong>
</div>
</div>
</body>/* css */
#prev {
background-image: url(./assets/icon-backward.svg);
}
#next {
background-image: url(./assets/icon-forward.svg);
}
.card {
width: 400px;
}
.card-carousel {
position: relative;
}
.card-carousel img {
display: block;
width: 100%;
height: auto;
}
#prev,
#next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#prev {
left: 0;
}
#next {
right: 0;
}
.card-content {
width: 400px;
padding: 12px 16px;
background-color: #fff;
}
.card-content h1 {
margin-bottom: 2px;
}
/* span은 inline이라 margin-bottom 안먹는다! */
.card-content strong {
display: block;
margin-top: 8px;
text-align: right;
}next buttonによりprev buttonおよびposition : absoluteが配備された.この場合、transform propertyにより詳細な調整が可能となる.(ボタンアイコンの上半部を基準に中央に調整されているので、アイコンの頂点を中央に置きます.)
2)
<!-- html -->
<body>
<aside class="modal">
<h1 class="modal-title">Manage Subscriptions</h1>
<p class="modal-desc">
You can follow the discussion on @kimbug without to leave a comment. Cool, huh? Just enter your email address in
the form here below and you are all set.
</p>
<div class="input-group">
<input type="email" placeholder="Your email" />
<button type="button">Subscribe</button>
</div>
<button type="button" class="close-button" aria-label="Close the modal"></button>
</aside>
</body>/* css */
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 32px 40px;
text-align: center;
border-radius: 4px;
}
.modal-title {
margin-bottom: 4px;
}
.modal-desc {
width: 590px;
margin-bottom: 24px;
}
.input-group input {
width: 200px;
height: 36px;
padding: 8px 16px;
background-color: #f6f8fa;
border-radius: 4px;
border: none;
}
.input-group button {
padding: 8px 14px;
color: #fff;
background-color: #2860e1;
border-radius: 4px;
border: none;
}
.close-button {
position: absolute;
top: 8px;
right: 8px;
}
position : fixedおよびposition : absoluteを使用することができる.レイアウトの要素はモデリングウィンドウなのでviewportの真ん中に配置し、閉じるボタンはモデリングを基準に右上隅に配置します.覚えたいコード
.card-content strong {
display: block;
margin-top: 8px;
text-align: right;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 32px 40px;
text-align: center;
border-radius: 4px;
}display : blockの場合は必ず心にとどめておきたいので選んでみました.Boxを習ったことがありますが、実際にコードを書くとき、インライン要素なのかブロック要素なのかを考えずにwidth、height、marging-bottomなどを与える場合が多いです.cssの場合、他のエラーコードも発生しないため、これらのコードを見逃すと見つけにくい場合があります.そのため、inline要素などにmarginやheightを適用する場合は必ず!きっと.display : blockを忘れないでください.2つ目のケースは
transform propertyです.valueに基づいてサイズや位置を調整することができ、詳細な調整に役立ちます.position万を使用した場合、変なところを直すことができたので助かりました.Reference
この問題について(TIL 008 | CSS Position), 我々は、より多くの情報をここで見つけました https://velog.io/@jun_n3/TIL-008-CSS-Positionテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol