position: absolute;を指定した要素と他の要素の余白を調整したい

前提・実現したいこと

footerにposition: absolute;をかけてbodyにposition: relative;を指定して常にページの下にfooterがある状態にしました。footerとmainに余白をつけたかったのですが、position: absolute;は浮いている状態になるとのことでmainに指定したpaddingはfooterの下を抜けるように適応されました。どうすればposition: absolute;を指定した状態で他の要素との余白を調整できるのでしょうか？

該当のソースコード

HTML
1  <body>
2
3    <!-- ====== header ====== -->
4    <header>
5      <div class="container">
6        <div class="header-items">
7      <h3 class="header-logo"><a href="../index.html">Furniture Design</a></h3>
8      <div class="header-button">
9        <span></span>
10        <span></span>
11      </div><!-- /header-button -->
12      </div><!-- /header-items -->
13    </div><!-- /container -->
14    </header>
15
16    <!-- ====== main ====== -->
17    <main>
18     <div class="container">
19      <div class="lineup-list">
20        <p class="lineup-heading">Products</p>
21        <ul class="lineup">
22          <li>
23            <a href="#"><img src="../images/item1.jpg">
24            <p>プロダクトタイトルプロダクトタイトル</p>
25             <p>¥99,999 +tax</p></a>
26          </li>
27          <li>
28            <a href="#"><img src="../images/item2.jpg">
29            <p>プロダクトタイトルプロダクトタイトル</p>
30             <p>¥99,999 +tax</p></a>
31          </li>
32          <li>
33            <a href="#"><img src="../images/item3.jpg">
34            <p>プロダクトタイトルプロダクトタイトル</p>
35             <p>¥99,999 +tax</p></a>
36          </li>
37          <li>
38            <a href="#"><img src="../images/item4.jpg">
39            <p>プロダクトタイトルプロダクトタイトル</p>
40             <p>¥99,999 +tax</p></a>
41          </li>
42          <li>
43            <a href="#"><img src="../images/item5.jpg">
44            <p>プロダクトタイトルプロダクトタイトル</p>
45             <p>¥99,999 +tax</p></a>
46          </li>
47          <li>
48            <a href="#"><img src="../images/item6.jpg">
49            <p>プロダクトタイトルプロダクトタイトル</p>
50             <p>¥99,999 +tax</p></a>
51          </li>
52          <li>
53            <a href="#"><img src="../images/item7.jpg">
54            <p>プロダクトタイトルプロダクトタイトル</p>
55             <p>¥99,999 +tax</p></a>
56          </li>
57          <li>
58            <a href="#"><img src="../images/item8.jpg">
59            <p>プロダクトタイトルプロダクトタイトル</p>
60             <p>¥99,999 +tax</p></a>
61          </li>
62          <li>
63            <a href="#"><img src="../images/item9.jpg">
64            <p>プロダクトタイトルプロダクトタイトル</p>
65             <p>¥99,999 +tax</p></a>
66          </li>
67          <li>
68            <a href="#"><img src="../images/item10.jpg">
69            <p>プロダクトタイトルプロダクトタイトル</p>
70             <p>¥99,999 +tax</p></a>
71          </li>
72          <li>
73            <a href="#"><img src="../images/item11.jpg">
74            <p>プロダクトタイトルプロダクトタイトル</p>
75             <p>¥99,999 +tax</p></a>
76          </li>
77          <li>
78            <a href="#"><img src="../images/item12.jpg">
79            <p>プロダクトタイトルプロダクトタイトル</p>
80             <p>¥99,999 +tax</p></a>
81          </li>
82        </ul>
83      </div><!-- /lineup-list -->
84      
85      <div class="lineup-select">
86        <p>1</p>
87        <p><a href="products2.html">2</a></p>
88      </div>
89     </div><!-- /container -->
90    </main>
91
92    <!-- ====== footer ====== -->
93     <footer>
94       <div class="container">
95         <div class="footer-nav">
96      <p class="footer-link"><a href="https://www.instagram.com/">INSTAGRAM</a></p>
97      <p class="footer-link"><a href="https://twitter.com/home">TWITTER</a></p>
98      <p class="footer-link"><a href="https://www.facebook.com/">FACEBOOK</a></p>
99      <p>&copy; Furniture Design</p>
100    </div><!-- /footer-nav -->
101    </div><!-- /container -->
102     </footer>
103     <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
104      <script src="script.js"></script>
105  </body>

CSS
1.container {
2  max-width: 1280px;
3  margin: 0 auto;
4}
5
6/* ====== header ====== */
7header {
8  position: fixed;
9  top: 0;
10  z-index: 99;
11  width: 100%;
12  background: white;
13}
14
15.header-items {
16  display: flex;
17  justify-content: space-between;
18  align-items: center;
19  height: 80px;
20}
21
22.header-logo a {
23  font-size: 21px;
24}
25
26.header-logo {
27  transition: all .6s;
28}
29
30.header-logo:hover {
31  opacity: 0.7;
32}
33
34.header-button {
35  position: relative;
36  width: 30px;
37  height: 30px;
38  cursor: pointer;
39}
40
41.header-button span {
42  display: block;
43  width: 30px;
44  height: 2px;
45  background: black;
46  border-radius: 4px;
47  position: absolute;
48}
49
50.header-button span:nth-child(1) {
51  top: 10px;
52}
53
54.header-button span:nth-child(2) {
55  bottom: 10px;
56}
57
58/* ====== main ====== */
59/* ~~~~~~ products_top ~~~~~~ */
60main {
61  padding: 80px 0 120px;
62}
63
64.lineup {
65  display: flex;
66  justify-content: space-between;
67  flex-wrap: wrap;
68  gap: 40px 0;
69  padding-bottom: 40px;
70}
71
72.lineup li {
73  width: 23%;
74  box-sizing: border-box;
75}
76
77.lineup p {
78  font-size: 12px;
79  line-height: 1.5;
80}
81
82.lineup img {
83  width: 100%;
84}
85
86.lineup-open {
87  text-align: center;
88  padding-bottom: 120px;
89  font-size: 14px;
90}
91
92/* ~~~~~~ products1 ~~~~~~~ */
93.lineup-heading {
94  font-size: 14px;
95  padding: 40px 0 30px;
96}
97
98.lineup-select {
99  display: flex;
100  font-size: 14px;
101  width: 60px;
102  margin: auto;
103}
104
105.lineup-select p:nth-child(1) {
106  padding-right: 40px;
107}
108
109/* ======footer ====== */
110footer {
111  height: 30px;
112  padding-bottom: 10px;
113  position: absolute;
114  left: 0;
115  right: 0;
116  bottom: 0;
117  z-index: 0;
118}
119
120.footer-nav {
121  display: flex;
122  align-items: center;
123}
124
125.footer-link {
126  padding-right: 30px;
127}
128
129.footer-link a {
130  font-size: 12px;
131}
132
133.footer-nav p:last-child {
134  margin-left: auto;
135  font-size: 11px;
136}

試したこと

https://teratail.com/questions/27989
こちらに似たような質問を発見しましたが、bodyにposition: relative;をかけているため、mainの要素の量によってfooterの位置も変わるのでtopで数値を指定することができません。

また、marginで余白を取るしかないとURLの質問者さんが結論を出していますが、mainにかけたmarginも画像のようになります。（Instagram、Twitter、Facebook、コピーライトの部分がfooterの要素）

footerにz-index: 0;をかけましたが浮いている状態に変化はありませんでした。

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

似たような質問を発見して私自身解決に努めましたが、見当違いの解釈をして誤った方法を試しているかもしれません。分かりづらい箇所があればご指摘お願いします。

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

回答1件

ベストアンサー

main に padding を設定しても footer は浮いた状態なので影響しません。
body の padding-bottom に footerの高さ＋希望の余白を設定してはどうでしょう。

css
1body {
2  position: relative;
3  padding-bottom: 120px;
4}

投稿2022/04/20 02:17

hatena19

総合スコア33715

amagiri

2022/04/20 11:11

上手くいきました、ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！