使用绝对定位 / 相对定位 设计版型
https://ithelp.ithome.com.tw/upload/images/20200411/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;
}
结果如下:
https://ithelp.ithome.com.tw/upload/images/20200411/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>```
结果如下:
https://ithelp.ithome.com.tw/upload/images/20200411/2010732102vPkO32Dq.png
z-index也是搭配绝对定位的重要语法,上面的例子再加上本日推荐的区块
未加上前效果如下:
https://ithelp.ithome.com.tw/upload/images/20200411/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;
}```
结果如下:
https://ithelp.ithome.com.tw/upload/images/20200411/20107321Yjxf2fcff3.png
今天来介绍一些跟「错误处理」有关的 operators。在使用 RxJS 时,资料流是透过 pipe...
前言 前一篇搞定 Ubuntu 作业系统的安装,接下来我们继续安装『机器学习』的相关软件及工具,包括...
一个网路通过传输介质连接两个或多个节点,共享资源;它有两种架构视图:物理视图和逻辑视图。网路的逻辑...
不知道为甚麽,旁边无缘无故多了一条空白区域,但那个区域根本没有其他元件 程序码好像也不知道该贴哪段,...
因Flex Message目前无法直接发送讯息至5000人社群 想请教各位大大 如何使用LIFF制作...