4.当上级框添加绝对或相对定位后,下级框以上级框的位置为基准点
在代码中为外框添加绝对定位,此时的效果。当外框向下和向右偏移50像素后,加上其本身的大小300像素,小框偏移300像素应该与外框相交才对。此时小框在外框右下角,由此可以得知,当上级框添加相对定位后,下级框的绝对定位将以上级框的左上角为基准进行偏移。
也可以试着将大框的绝对定位改为相对定位,此时下级框的绝对定位仍然以上级框的左上角为基准进行偏移。当多个绝对定位的框重叠时需要考虑到一个问题,框的叠加顺序是怎样的?在前面的实例中会发现,后加到代码中的框会叠加在前面的小框上。但是,如果要改变这个叠加顺序有什么好的方法吗?有,可以在框的代码中添加一个样式来改变,即在“CSS设计器”中设置z-index(堆积顺序)的值。设置后数值大的框会叠加在数值小的框上面。
5.使用淘宝样式突破限制
绝对定位是最灵活的布局方法,但是在淘宝装修中使用绝对定位的样式(position:absolute)会被官方屏蔽。为什么很多淘宝店铺中仍然可以进行绝对定位的布局呢?这是因为他们借用了淘宝的样式,将代码修改后实现的。
● footer-more-trigger
在淘宝集市店可以直接调用footer-more-trigger。当我们给一个框添加绝对定位时正常的写法为:
<divstyle="position:absolute; ……"
为了使绝对定位在淘宝店铺中生效,可以写成:<divclass="footer-more-trigger"style="…"
● sn-simple-logo
在天猫店铺需要调用sn-simple-logo,将上面代码中的footer-more-trigger改为sn-simple-logo即可适用于天猫店铺,也可以将两个类名均写上,这样该代码就可以兼容两种店铺。写法如下:
<divclass="footer-more-triggersn-simple-
logo"style="…"
在调用上面的类名后还需要将不用的样式覆盖,以避免影响我们自己的样式,具体的操作如下。
01 在使用绝对定位的框上,删除position:absolute;。
02 为这个框添加调用的淘宝样式class=“footer-more-trigger sn-simple-logo”。
03 在这个框的行内样式中,覆盖那些由于借用淘宝官方样式而被附加上的样式style=“margin:0;padding:0; border:0; left:***px; top:***px; width:***px; height:***px; ”.
04 将style中的***参数根据框的大小和定位修改为具体的值。
在详情页中不可以使用这里调用样式的方法。
突破950像素极限,宽度延展
淘宝集市店铺的模块中最宽的为950像素,所以在做超出官方宽度的全屏海报、通栏分类时就需要购买收费模板,但是这里讲的绝对定位可以突破950像素宽度的限制。
1.如何突破
在淘宝集市专业版旺铺中,主要内容区为嵌套的框,共9个层级,而添加的“自定义内容”代码会放置在1这个层级中,如图7-121所示。在“自定义内容”外面嵌套了9个框。要想让“自定义内容”突破950像素取决于1~9这9个框的样式,如果框1~9中有一个框有相对或绝对定位,且设置了超出隐藏的样式,那么这个框就达到了最宽,其以下的所有框将以该框为基准来定位,也就是说其下级框都不可能超出950像素的宽度。
在框1~9中,框7具有相对定位的样式,并设置了框为100%和超出隐藏的样式。也就是浏览器有多大,框就有多宽。所以“自定义内容区”模块中的代码使用绝对定位的时候,是以框7为基准进行定位的。由于框7的宽度为100%屏幕宽,所以可以实现突破950像素宽度的要求。
淘宝专业版旺铺的不同官方模板中,首页的结构都可以突破950像素宽度,但自定义页面中框2就具有相对定位的样式,并设置了超出隐藏,且宽度为950像素,所以自定义内容无法突破950像素宽。
2.突破950像素实现全屏海报
知道了突破950像素的原理后就可以实现自定义海报的全屏效果了。为了方便实时查看,本实例的代码在淘宝装修后台的“自定义内容区”模块中编写。
01 准备一张制作好的海报图,宽度为1920px,将图片上传到图片空间。