主要知识点：
1、5种常用定位：静态定位/相对定位/绝对定位/固定定位/吸附定位（磁铁定位）
position:static/relative/absolute/fixed/sticky。
2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。
整体效果图：
效果说明：
1、随着网页向下滚动，当导航到达窗口顶端（top=0）时，固定在顶端。
2、分享模块在屏幕的固定位置显示。
3、banner图是由3部分堆叠组成：底层图片、中层透明遮罩层、顶层文字加按钮。
参考：
- 导航吸附效果：
nav{ position: sticky; top: 0; z-index: 9999; }
- 分享模块固定显示：
.share{ position: fixed; left: 100%; margin-left: -100px; bottom: 50px; width: 100px; ...}
- 3层banner图部分：
html结构部分：
<section class="top">
<div><img src="img/1.jpg"/></div>
<div></div>
<div><p>MY BEAUTIFUL LIFE</p><br/><button>LOOK MORE ></button></div>
</section>
css效果：
.top{ position: relative; }
.top img{ width: 100%; height: 200px; }
.top div:nth-child(2){
width: 100%;
height: 200px;
background-color: #000000;
opacity: 0.5;
position: absolute; /*最近定位祖先元素为.top*/
top:0;
left: 0;
}
.top div:nth-child(3){
position: absolute;
width: 350px;
height: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto auto; /*四边都为0，margin为auto，居中*/
text-align: center; /*内容又居中*/
}
本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/5538.html
微信扫一扫 
支付宝扫一扫 