如何讓愛心、讚、FB的button在右下角?

在這個案例中我們先寫HTML

    <section>
        <h1>進階定位</h1>
        <h3>將下方的小方塊定位到照片的右下角</h3>
        <div class="card">
            <div class="card-header">
                <img class="card-img" height="200" src="./嵐山岩田山猴子公園.jpeg" alt="嵐山岩田山猴子公園">
                <div class="card-btns">
                    <button>
                        <i class="fas fa-heart"></i>
                    </button>
                    <button>
                        <i class="fas fa-thumbs-up"></i>
                    </button>
                    <button>
                        <i class="fab fa-facebook"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <h4>嵐山猴子公園岩田山</h4>
                <p>
                    嵐山猴子公園岩田山景點，知道的遊客並不多，因為需要爬一段山路登頂後，才能登高欣賞到京都、嵐山的美景，而且還有另一個重點，就是可以近距離看到很多活潑可愛的野生日本彌猴，不過只能遠觀，禁止觸碰啦，也挺適合帶比較大的小朋友去看猴子，算是個京都親子景點吧～
                </p>
            </div>
        </div>
       </section>

上述HTML重點如下:
整體、header、圖片、button、文章，我們各自給予一個class，以區分各自的區塊，因此一共有card、card-header、card-img、card-btn、card-body五個class。
接著我們設定CSS

.card {
    width: 300px;
    box-shadow: 0 2px 3px rgba(250, 3, 3, 0.2), 0 0 0 0px              rgba(255, 99, 71, 0);
    transition: all .3s ease;
}

先把card包起來

.card-header { 
    position: relative;
}

設定position，這裡選用relative的原因是因為，搭配下面btn的定位設定改為relative(absolute也可以，但會導致版型跑版，Card的body會穿透過去)。

.card-btns {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

我們將btn定位到上一層，設定好之後就可以將三個button設定到右下角囉!

今天的教學可以參考我的範例 GitHub 我的第一個網站-6