绝对定位的应用.pptVIP

* 电子商务网页设计与制作 Design?and?Creation?of?E-commerce?Web Pages 绝对定位的应用 T H I S I S 导入：基础任务分析 绝对定位应用-热卖标签 绝对定位应用的说明 Content 导 入-基础任务分析 本次任务是承接前面的任务完成的首页布局来生成商品展示页面。然后通过增加热卖标签的形式来了解定位的场景应用。特别是绝对定位，某个元素可以在盒子中任意移动，并且压住其他盒子。这是标准流和浮动不能实施的。 绝对定位应用-热卖标签 在具体某个商品图片上增加热卖标签，从分析可知道该标签图像“sale.png”需要重叠压在具体某个商品图片上。这里考虑采用定位布局的方法加以解决。切换到页面代码视图中，在“生鲜速食”结构模块的8件商品中选取2个，在其div内增加热卖标签结构，为了和div里面放置图像文件区分，这里采用了em标签。 绝对定位应用的说明 绝对定位是元素在移动位置的时候，是相当于它的祖先元素来说的。 绝对定位的特点： 如果没有祖先元素或者祖先元素没有定位，以浏览器为准定位（Document文档） 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级有定位的祖先元素为参考点移动位置。 绝对定位不再占有原先的位置。（脱标） 子绝父相的口诀 子元素使用绝对定