前端工程学习日记第12天

使用绝对定位 / 相对定位 设计版型

http://img2.58codes.com/2024/20107321bhjMvVKsQr.png
上面商品图片的hot可以跟图片重叠，这是float绝对做不到的事情，需要透过绝对定位来处理

原理：

在外层新增div (Product_block_hot)并设为相对定位(relative)让hot区块只能在该範围内移动，但hot区块要设为绝对定位(absolute)才有效。
hot区块再用top、bottom、left、right后面加上数值调整位置
HTML:

    <div class="Product_block_hot">        <span class="Product_hot_icon">Hot</span>        <img src="product_1.png" alt="">    </div>    ```CSS:

.Product_block_hot{
position: relative;//设为相对定位(relative)
text-align: center;
border:2px solid black;
}

//hot红色区块
.Product_hot_icon{
position: absolute;//设为绝对定位(absolute)
font-weight: bold;
top: 0px;
right : 0px; //右边上面都设0，则出现在右上方
color: white;
display: block;
background: red;
width: 40px;
height: 19px;
text-align: center;
}

结果如下：http://img2.58codes.com/2024/20107321ij6NlIhk3s.png就算把图片删除，新增div 背景设为绿色也是同样

<div class="Product_block_hot">    <span class="Product_hot_icon">Hot</span>    <div class="color" style="width:300px;height:240px;background-color:green;">    </div></div>```

结果如下：

http://img2.58codes.com/2024/2010732102vPkO32Dq.png

z-index也是搭配绝对定位的重要语法，上面的例子再加上本日推荐的区块
未加上前效果如下：

http://img2.58codes.com/2024/20107321VxJt6UaNNO.png

HTML：

    <div class="Product_block_hot">        <span class="Product_hot_icon">Hot</span>        <div class="color" style="width:300px;height:240px;background-color:green;">        </div>        <div class="title">本日推荐</div>    </div>```CSS：新增本日推荐css

.title {    position: absolute;    width: 300px;    height: 20px;    background: blue;    color: white;    font-weight: bold;    top: -10px;}```

如果想要让本日推荐蓝色区块移到hot上面可在这两个css加入z-index，后面数字越大则越在上面

CSS：

.Product_hot_icon{    z-index: 18;    position: absolute;    font-weight: bold;    top: 0px;    right : 0px;    color: white;    display: block;    background: red;    width: 40px;    height: 19px;    text-align: center;}.title{    z-index: 19;//数字越大越上层    position: absolute;    width: 300px;    height: 20px;    background: blue;    color: white;    font-weight: bold;    top: -10px;}```结果如下：http://img2.58codes.com/2024/20107321Yjxf2fcff3.png