如何在侧边栏的左下角放置图像？

Question

我的 CSS 技能不是最好的，但我知道一些基础知识。 我正在尝试将我个人品牌徽标的这张图片放在侧边导航栏的左下角，但我在如何有效地做到这一点上遇到了麻烦。 我想以某种方式做到这一点，导航栏不会被放置在那里的图像加宽，目前，就目前而言，侧边导航变得更宽，因为放置在那里的图像标签。

这是我的侧边导航 React 代码

const Sidebar = () => {
    return (
        <div className="sidebar">
            <div className="sideBarWrapper">
                <div className="sideBarMenu">
                    <h1 className="sideBarTitle">Dashboard</h1>
                        <ul className="sideBarList">
                            <li className="sideBarListItem">
                                <Home  className="sideBarIcon"/>
                                Home
                            </li>

                            <li className="sideBarListItem">
                            <Icon 
                            icon="mdi:currency-btc" 
                            className="sideBarIcon"
                            />
                                Cryptocurrency
                            </li>

                            <li className="sideBarListItem">
                            <Icon 
                            icon="whh:stocks" 
                            
                            className="sideBarIcon"
                            />
                                Stocks
                            </li>

                            <li className="sideBarListItem">
                                <Visibility  className="sideBarIcon"/>
                                Watchlist
                            </li>

                            <img className="img" src={Logo}/>
                        </ul>
                        
                </div>
                
            </div>   
        </div>
    )
}

export default Sidebar

这是侧边导航的 CSS

.sidebar{
    flex: 1;
    height:  calc(100vh - 50px);
    background-color: goldenrod;
    position: sticky;
    top: 50px;
}

.sideBarWrapper{
    position: relative;
    padding: 20px;
    color: #555;
}

.sideBarMenu{
    margin-bottom: 10px;
}

.sideBarTitle{
    font-size: 15px;
    color: black;
}

.sideBarList{
    list-style: none;
    padding: 5px;
}

.sideBarListItem{
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.sideBarListItem.active, .sideBarListItem:hover{
    background-color: whitesmoke
}

.sideBarIcon{
    margin-right: 5px;
    font-size: 50px !important;
}

.img{
   height: 300px;
   margin-right: 5px;
   bottom: 70px;
}

Answer 1

你缺少position: absolute; 在标志上。 添加这将 (a) 允许徽标附加到其最近定位的祖先 ( .sideBarWrapper ) 的底部，以及 (b) 使其对其祖先的布局没有影响。

 .sidebar { background-color: goldenrod; height: 500px; width: 300px; box-sizing: border-box; } .sideBarWrapper { height: 100%; position: relative; padding: 20px; color: #555; } .sideBarMenu{ margin-bottom: 10px; } .sideBarTitle{ font-size: 15px; color: black; } .sideBarList{ list-style: none; padding: 5px; } .sideBarListItem{ padding: 5px; cursor: pointer; display: flex; align-items: center; border-radius: 10px; } .sideBarListItem.active, .sideBarListItem:hover{ background-color: whitesmoke } .sideBarIcon{ margin-right: 5px; font-size: 50px !important; } .logo { position: absolute; bottom: 70px; width: 120px; left: 50%; transform: translateX(-50%); }

 <div class="sidebar"> <div class="sideBarWrapper"> <div class="sideBarMenu"> <h1 class="sideBarTitle">Dashboard</h1> <ul class="sideBarList"> <li class="sideBarListItem"> Home </li> <li class="sideBarListItem"> Cryptocurrency </li> <li class="sideBarListItem"> Stocks </li> <li class="sideBarListItem"> Watchlist </li> <img class="logo" src='data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODQyIiBoZWlnaHQ9IjFlMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNzAyIDk2MGMtNTQuMiA1Mi42LTExNCA0NC40LTE3MSAxOS42LTYwLjYtMjUuMy0xMTYtMjYuOS0xODAgMC03OS43IDM0LjQtMTIyIDI0LjQtMTcwLTE5LjYtMjcxLTI3OS0yMzEtNzA0IDc3LTcyMCA3NC43IDQgMTI3IDQxLjMgMTcxIDQ0LjQgNjUuNC0xMy4zIDEyOC01MS40IDE5OC00Ni40IDg0LjEgNi44IDE0NyA0MCAxODkgOTkuNy0xNzMgMTA0LTEzMiAzMzIgMjYuOSAzOTYtMzEuOCA4My41LTcyLjYgMTY2LTE0MSAyMjd6TTQyMyAyMzdDNDE0LjkgMTEzIDUxNS40IDExIDYzMSAxYzE1LjkgMTQzLTEzMCAyNTAtMjA4IDIzNnoiLz48L3N2Zz4='> </ul> </div> </div> </div>