HTML/CSS 定位問題/Divs 碰撞

Question

我已經嘗試解決這個問題超過 4 個小時了，但它變得非常令人沮喪，我是 HTML/CSS 的初學者，非常感謝您的幫助！

目標：將“.menuButton”放在左下角+確保圖標實際顯示

請記住，代碼在我這邊運行得更好，所有內容都正確定位 + 社交圖標確實顯示出來，我唯一的問題是將 .menuButton 放在左下角，因為我不完全確定為什么這樣定位壞的。

PS 這不是像嘗試不同的顯示那樣簡單的修復：選項、定位或更改邊距，相信我，我已經嘗試了幾乎所有方法 | 還要確保背景沒有問題

P.S2 請在 codepen 上測試代碼並確保它有效 <3

https://codepen.io/jonathanz-10/pen/mdMLpXp

CSS：

 body, html { height: 100%; margin: 0; padding: 0; font-family: 'Helvetica', sans-serif; background: -webkit-linear-gradient(-45deg, rgba(26, 188, 156, 1) 0%, rgba(142, 68, 173, 1) 100%); } h1 { font-size: 24px; margin: 10px 0 0 0; font-weight: lighter; text-transform: uppercase; color: #eeeeee; } p { font-size: 12px; font-weight: light; color: #333333; } span a { font-size: 18px; color: #cccccc; text-decoration: none; margin: 0 10px; transition: all 0.4s ease-in-out; &:hover { color: #ffffff; } } @keyframes float { 0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); } 50% { box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2); transform: translatey(-20px); } 100% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); } } .container { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .avatar { background: url("https://jonathanz-10.github.io/Website/images/avatar.png"); background-repeat: no-repeat; background-size: 100% 100%; width: 150px; height: 150px; box-sizing: content-box; border: 5px white solid; border-radius: 50%; overflow: hidden; box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); animation: float 6s ease-in-out infinite; } .content { width: 100%; max-width: 600px; padding: 20px 40px; box-sizing: border-box; text-align: center; } .menuButton{ bottom: 0; left: 0; height: 200px; width: 200px; display: inline-block; text-align: center; border: 2px solid red; background-repeat: no-repeat; background-image: url("https://jonathanz-10.github.io/Website/images/avatar.png"); }

 <script src="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></script> <div class="container"> <div class="avatar"></div> <div class="content"> <h1>JZ</h1> <p>Follow me on:</p> <p> <span><a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></span> <span><a href="https://github.com/" target="_blank"><i class="fa fa-github"></i></a></span> <span><a href="https://www.linkedin.com/in/" target="_blank"><i class="fa fa-linkedin"></i></a></span> <span><a href="https://codepen.io/" target="_blank"><i class="fa fa-codepen"></i></a></span> </p> <p>For more information scroll down</p> </div> </div> <div class="menuButtton">hi</div>

Answer 1

class 屬性中有錯字；)

改變

<div class="menuButtton">hi</div>

到

<div class="menuButton">hi</div>