Web前端开发必知必会课件-中文版 lesson 8 Postition属性.pptx

下载文档

0
0
约1.14千字
约 11页
2024-04-11 发布于山东
举报
版权申诉
保障服务

Web前端开发必知必会课件-中文版 lesson 8 Postition属性.pptx

1、本文档共11页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

地址：杭州市滨江区滨文路528号邮政编码：3100532024/4/10position位置属性LESSON8

CONTENTS01position位置属性02叠放层03absolute&relative

position---脱离标准流(块级元素两个重要属性)iesfloatpositionexample1：bianlian01example2：景点介绍.html

Example3：playpokerExample3-2：HWL-poker

layersandpositionExample4position：(static)/absolute/relative/fixed/sticky(Absolute)divas：floatingadvertisementLayoutcontainer（Opacity=0.5）transparentlayer

叠放层DIV(关键)IDpositionz-index#apDiv1{ position:absolute; left:410px; top:32px; width:144px; height:141px; z-index:1;}-----------------------------------<body><divid=“apDiv1”>innercontent</div><divid=“apDiv2”>innercontent</div>……</body>02

精确定位子块与父块(apDivsandcontainerDiv)兄弟关系/并列父子关系/包含注意坐标(X,Y)：left/right,top/bottom03

(father)position:relative;(child)position:absolute;精确定位-关键点容器与子元素父子关系明确position属性父块：position:relative;子块：position:absolute;

透明（Transparent）

传统方式VS颜色模型filter:alpha(opacity=5)；opacity:0.3；vsbackground-color:rgba(51,51,51,0.1);

layer层的应用小结OverlapDiv—自己命名ID：Position属性Z-index值（越大越在上）Overflow溢出精确定位(X,Y)父块DIV:relative子块div:absolute（层）坐标：left/right,top/bottom透明与叠放

ThankYou地址：杭州市滨江区滨文路528号邮政编码：310053

您可能关注的文档

文档评论（0）

xiaobao + 关注: 实名认证

内容提供者

该用户很懒，什么也没介绍

咨询Ta 进入空间

1亿VIP精品文档

更多 >

Web前端开发必知必会课件-中文版 lesson 8 Postition属性.pptx