作者cgcat (小绵羊赶集)
看板Web_Design
标题[问题] 试做广告旋转木马效果
时间Mon Sep 22 14:46:16 2014
我要试做一个广告旋转木马的效果
目前先用css再排板,但却遇到一个问题
我的效果是这样的,一组推荐模组有四张图片当滑鼠移过
最右边的图片会出现next的箭头图片,最左边则会有prev的箭头图片作为btn
因为必须要将箭头图片压在推荐的图片上面
所以我在推荐图片的wrap下了position:absolute;这样箭头才可以压在上层
但是因为下了position:absolute;之後下方的footer就会无视推荐模组的高度
不会排序在推荐模组下,变成footer与推荐重叠
有什麽方法可以解决这样的状况让footer会排序在推荐後面呢?
以下是我的code,谢谢各位高手
http://jsfiddle.net/y1hysheh/
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 59.124.108.82
※ 文章网址: http://webptt.com/cn.aspx?n=bbs/Web_Design/M.1411368381.A.331.html
1F:→ mmis1000: 图片404阿...根本看不懂 09/22 18:56
2F:→ crown: 我是後端工程师,但是这种前端工作我也做N次了 09/23 01:40
3F:→ Canboo: clear:auto或hidden 09/23 08:23
4F:推 leochen0818: 要放在後面的元素设定clear: both就可以了 09/23 11:10
5F:→ leochen0818: 不过通常该区块会先用一块div包起来并且设定 09/23 11:10
6F:→ leochen0818: position: relative 09/23 11:11
7F:→ leochen0818: 再在该区块进行其他设定,就不会影响到後面的区块 09/23 11:11
8F:推 aspdoctor: 原来这个中文叫旋转木马 09/23 14:13
9F:→ leochen0818: 其实有好多种说法耶!就连英文也有各家自己的名称 09/23 15:37
10F:推 yyc1217: 基本上都叫carousel 09/23 20:17