それぞれのboxに記載の位置をfixedで固定したい

html
1<div class="all-box">
2  <div class="box">
3    <span>左上</span>
4  </div>
5  <div class="box">
6    <span>右上</span>
7  </div>
8  <div class="box">
9    <span>右下</span>
10  </div>
11  <div class="box">
12    <span>左下</span>
13  </div>
14</div>

css
1.all-box {
2  position: fixed; /* fixedを指定して位置を固定する */
3}
4.box {
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  width: 100px;
9  height: 100px;
10  background: #556;
11  color: #fff;
12  font-weight: bold;
13  font-size: 24px;
14}

Lhankor_Mhy

2021/09/28 05:17

「左上」と書いてあったら左上に配置する、というご質問のように読みましたが、合っていますか？もしそうであれば、CSSでは子要素の文字列に合わせたスタイルを適用することはできないので、質問タグの範囲では難しいです。 JavaScript の使用を検討してください。

行動規範の内容に同意します

回答1件

ベストアンサー

下記のようなことでしょうか。

css
1.all-box {
2
3}
4.box {
5  position: fixed; /* fixedを指定して位置を固定する */
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  width: 100px;
10  height: 100px;
11  background: #556;
12  color: #fff;
13  font-weight: bold;
14  font-size: 24px;
15}
16.box:nth-child(2) {
17  right: 0;
18}
19.box:nth-child(3) {
20  right: 0;
21  bottom: 0;
22}
23.box:nth-child(4) {
24  bottom: 0;
25}