mainタグの中に「main-visual」と「reason」というdivを入れているのですが、main-visualにpositionを指定しているため、main-visualが浮いた状態になってしまっています。ネットで調べたところmarginを指定すればいいということはわかったのですが、main-visualの下にあるreasonにmargin-topを指定しても、main-visualが連動してしまってうまくmargin-topが効きません。なぜmain-visualが連動してしまっているのか原因が分からないため質問させていただきました。ご回答いただけますと幸いです。 ```ここに言語を入力　　

話して学ぼう！
BBB英会話スクール

無料体験はこちら

BBSが選ばれる理由

``` ``` html { font-size: 100%; } img { max-width: 100%; width: 100%; } * { box-sizing: border-box; outline: 1px solid magenta; } body { margin: 0; padding: 0; } ul { padding-left: 0; } li { list-style: none; } a { color: #ffffff; text-decoration: none; } /*----------------------------------------------------------------------------*/ header { height: 100px; display: flex; justify-content: space-between; padding: 20px 50px; } header h1 { width: 100px; line-height: 1px; z-index: 10; } header h1 a { display: block; } .reversi-image { width: 100px; opacity: 0; position: absolute; top: 41px; left: 50px; transition: all 0.5s ease 0.1s; } .open .reversi-image { opacity: 10; z-index: 11; } .toggle-btn { width: 100px; height: 100px; position: fixed; top: 0; right: 0; background-color: #FF3333; z-index: 10; cursor: pointer; transition: all 0.4s ease 0.1s } .toggle-btn:hover { opacity: 0.8; } .toggle-btn span { display: block; width: 50px; height: 2px; background-color: #FFFFFF; position: absolute; left: 25px; transition: all 0.3s ease 0.1s } .toggle-btn span:nth-child(1) { top: 35px; } .toggle-btn span:nth-child(2) { top: 50px; } .toggle-btn span:nth-child(3) { bottom: 35px; } .open .toggle-btn span:nth-child(1) { transform: translateY(15px) rotate(-45deg); } .open .toggle-btn span:nth-child(2) { opacity: 0; } .open .toggle-btn span:nth-child(3) { transform: translateY(-15px) rotate(45deg); } #nav { opacity: 0; display: none; z-index: 10; width: 100%; position: fixed; top: 65px; left: 0px; font-family: "游ゴシック"; letter-spacing: 1.5px; font-weight: bold; text-align: center; transition: all 0.5s ease 0.1s; } .open #nav { opacity: 1; display: block; } #nav li { color: blue; margin-bottom: 20px; font-size: 16px; opacity: 0; transition: all 0.5s ease 0.1s; } .open #nav li { opacity: 1; } .link-box { margin-top: 20px; display: inline-block; padding: 15px 45px; border: 1px solid #ffffff; position: relative; transition: all 0.4s ease 0.1s } .link-box:hover { background-color: #ffffff; color: #FF3333; } .link-box::after { content: ""; width: 250px; height: 55px; border-right: solid 1px #fff; border-bottom: solid 1px #fff; position: absolute; bottom: -5px; left: 1px; } #mask { visibility: hidden; opacity: 0; z-index: 1; background-color: #FF3333; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; transition: all 0.2s ease 0.1s; } .open #mask { opacity: 1; visibility: visible; } /*----------------------------------------------------------------------------*/ .main-visual { position: relative; } .main-visual ul li { width: 100%; position: absolute; top: 0; left: 0; opacity: 0; animation: slide 15s infinite; } .main-visual ul li::after { position: absolute; content: ''; top: 0; bottom: 0; left: 0; right: 0; box-shadow: inset 0 0 10px 15px #FFF; } .main-visual img { width: 100%; height: 100vh; object-fit: cover; } .main-visual ul li:nth-child(1) { animation-delay: 0s; } .main-visual ul li:nth-child(2) { animation-delay: 5s; } .main-visual ul li:nth-child(3) { animation-delay: 10s; } @keyframes slide { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 1; } 45% { opacity: 0; } 100% { opacity: 0; } } .text-contents { position: absolute; top: 230px; left: 150px; font-family: "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; } .text-contents h2 { font-size: 46px; text-shadow: 2px 2px 5px #FFFFFF; margin-bottom: 25px; } .text-contents a { display: block; width: 435px; background-color: #FF3333; text-align: center; padding: 15px 0; border-radius: 10px; font-size: 25px; box-shadow: 0px 5px 0px 0px #993300; position: relative; transition-duration: 0.3s; } .text-contents a::after { content: ""; height: 13px; width: 13px; color: white; /* display: block; */ border-top: solid 3px #FFFFFF; border-right: solid 3px #FFFFFF; transform: rotate(45deg); position: absolute; top: 27px; left: 387px; } .text-contents a:hover { transform: scale(1.05); opacity: 0.95; } /*----------------------------------------------------------------------------*/ .reason { margin-top: 810px; } ```

話して学ぼう！BBB英会話スクール

BBSが選ばれる理由

話して学ぼう！
BBB英会話スクール

	@@ -1,1 +1,1 @@
1	- 別な~~ブロック~~が~~marginに~~連動してしまう
1	+ marginを指定した要素と別な要素が連動してしまう

質問編集履歴