頂部fixed固定條遮擋下邊文案

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

頂部fixed固定條遮擋下邊文案

當頂部出現固定條之後最讓人頭疼的問題就是會遮擋下面的內容,一般的解決辦法就是給最外邊的容器加padding-top,但是這非常不靈活,因為你不知道什麼時候需要加頂部固定條,而且高度也不確定。有的時候加個類名區分,沒有的時候去掉,這就要經常跟後端溝通,十分麻煩,今天想到而一個絕佳的好辦法!是什麼呢?就是給這個需要固定的條加一個父容器,並且給這個父容器設定高為固定條的高度,這樣就比較靈活啦!

<div class="header-banWrap">
<div class="head-openApp fixed-top">
<a class="btn btn-primary1 btn-open fr" href="javascript:;">開啟APP</a>
<a class="logo1 inl-b" href=""></a>
</div>
</div>
.fixed-top {
position: fixed;
top: 0;
width: 100%;
max-width: 640px;
z-index: 9;
border-bottom: 1px solid #e8e8e8;
}
.header-banWrap {
height: 60px;
}
.head-openApp {
padding: 8px 10px;
background: #fff;
}
.head-openApp .logo1 {
background: url("img/common/logo_big.png?v=#{$getTs}") no-repeat;
background-size: 165px;
width: 165px;
height: 44px;
}
.head-openApp .btn-open {
padding: 6px 21px;
font-size: 14px;
margin-top: 2px;
}

相關文章

程式語言 最新文章