生活随笔
收集整理的這篇文章主要介紹了
前端小技巧-定位的活学活用之仿淘宝列表
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
最終效果如下
為了避免相鄰的盒子邊框?qū)挾券B加,所有盒子float: left;,出現(xiàn)了以下問題(有的盒子的邊框被擋住了)
重點來了 -- 定位的靈活運用(除了static),當鼠標移入盒子后,提高盒子的層級,可以輕松實現(xiàn)效果
- 1.情況一:直接給盒子一個相對定位!絕對定位是不行的,因為絕對定位的盒子不占有原來的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>淘寶列表</title><style type="text/css" media="screen">.item {height: 300px;width: 130px;border: 2px solid #ccc;margin-top: 100px;float: left;margin-left: -2px;}.item:hover {border: 2px solid red;position: relative; /* 絕對定位或者相對定位的盒子層級要比沒有定位的盒子高 */}</style>
</head>
<body><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</body>
</html>
- 情況二:當盒子里面的子元素有絕對定位的時候,子絕父相,情況一就不適用了.可以通過z-index值來提高層級關(guān)系
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>淘寶列表</title><style type="text/css" media="screen">.item {height: 300px;width: 130px;border: 2px solid #ccc;margin-top: 100px;float: left;margin-left: -2px;position: relative;}.item:hover {border: 2px solid red;z-index: 1; /* 子絕父相的情況下,盒子已經(jīng)是相對定位了,可以通過z-index值來提高層級關(guān)系 */}</style>
</head>
<body><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的前端小技巧-定位的活学活用之仿淘宝列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
