Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.1-定位_第1页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.1-定位_第2页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.1-定位_第3页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.1-定位_第4页
Web前端开发（HTML5+CSS3+JavaScript） 课件 第6章 6.1-定位_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端基础技术CSSJSHTML第6章6.1-位置与定位Contents目录默认位置相对位置、绝对位置固定位置粘性位置（1）位置属性，position属性(5个)取值：static(默认值，正常文档流位置：从上到下(块元素）、从左到右（行内元素）：位置固定，不可改变。relative：相对位置，相对其正常位置定位。absolute：绝对位置，相对非static的父元素定位。fixed：固定位置，相对浏览器窗口定位。sticky：粘性位置，距离可滚动容器（浏览器）边缘一定距离时固定不滚动（冻结）。z-index：多块重叠时，块在z-轴位置(position除static外)定位：使用位置属性position与定位属性left、top、right和bottom属性结合，来确定元素在页面的位置.位置属性position：A)relative：相对原来的位置，偏离左或右(left|right之一

）、上或下（top|bottom之一）位置，一般通过改变左上角（lefttop）来改变其位置。特性：（1）整体浮动在页面，不影响其他元素的布局，但仍然占据原来空间（位置）（2）应用：通常为子元素的绝对定位作为参考。例1：理解相对位置的特性认识特性：通过lefttop或bottomright来改变位置，但仍然占据原来空间。一般较少单独使用，主要作为容器为其他子元素提供参考定位。<!--相对原来的位置产生浮动；但仍旧占据原来的空间--><divclass="container"><divclass="top">默认位置</div><divclass="middle">相对位置，偏移x,y20px20px</div><divclass="bottom">默认位置</div></div>*{box-sizing:border-box;}.container{width:200px;border:10pxsolidred;}.container>div{height:40px;}.top{background-color:yellow;}.middle{background-color:gray;position:relative;}.bottom{background-color:gold;}.container:hover>.middle{

/*left:20px;top:20px;*/bottom:20px;right:20px;}B).absolute：相对具有非默认位置的父元素进行定位；脱离了原来的位置，不再占用原来位置（空间），宽度高度默认由内容决定（行内块元素特征）。特征：（1）相对取值为relative、absolute、fixed的父元素来定位在页面的任意位置。（2）整体浮动在页面，不影响其他元素的布局，不再占据原来空间（位置）（3）可用于块元素和行内元素，都具有行内块元素特征，可以设置宽度和高度；可以同时改变left和right来改变宽度；或者同时改变top和botton来改变高度。注意！！！：需要明确相对哪个父元素定位！---实际应用中，是相对具有relative位置属性的父元素相对父容器，通过同时改变left|top（左上角位置）、right|bottom（右下角位置）属性定位到任意位置；如果宽度不设定，则其宽度跟随left、right的同时改变，高度同理；父元素必须是relative，实际上，你可以认为：relative元素就是为absolute提供定位用的。（2）定位属性left：子元素左边（外侧）离父元素左边框内侧距离right：子元素右边离父元素右边框内侧距离top：子元素顶端离父元素上边框内侧距离bottom：子元素底部离父元素下边框内侧距离仅仅改变left：0；top：0；仅仅改变right：0；bottom：0；例2：理解绝对位置的特性<!--绝对位置，相对父元素浮动；不再占据原来的空间--><!--默认浮动在原来位置--><divclass="container"><divclass="top">默认位置</div><divclass="middle">绝对位置</div><divclass="bottom">默认位置</div></div>12默认绝对位置：原来位置left:0;top:0;3right:10px;bottom:10px;4右边顶部对齐(1)理解相对容器的top、left、right和bottom四个位置定位；(2)相对容器内部边框线的距离，不计父容器的padding。

*{box-sizing:border-box;}.container{width:200px;border:10pxsolidred;

/*参考定位容器*/position:relative;}.container>div{height:40px;}.top{background-color:yellow;}.bottom{background-color:gold;}.middle{background-color:gray;

position:absolute;/*2*/

/*left:0;top:0;*//*3*/

/*right:10px;bottom:10px;*//*4*/

left:190px;/*内180+10右边框*/top:-10px;

width:100px;}例3理解相对谁进行绝对定位；容器的概念---实现如下的二级导航菜单效果<divclass="container"><ulclass="nav"><li><ahref="#">导航链接1</a><divclass="nav-group"><ahref="#">二级导航11</a><ahref="#">二级导航12</a>

</div></li><li><ahref="#">导航链接2</a><divclass="nav-group"><ahref="#">二级导航21</a><ahref="#">二级导航22</a></div></li></ul></div>如果相对main进行定位，那么效果就是京东界面的导航菜单效果---试试？显示与隐藏：display属性：none/block<style>*{box-sizing:border-box;}.container{width:400px;border:1pxsolidgray;position:relative;}ul{list-style:none;padding:0;margin:0;width:200px;text-align:center;}li{position:relative;background-color:#ccc;}.nav-group{width:200px;min-height:200px;background-color:#ccc;/**/position:absolute;left:200px;top:0;/**/display:none;}li:hover.nav-group{display:block;}

</style>例4思路扩展：相对位置和绝对位置-购物车数字和图标border-radius:4px4px4px4px;/*上右下左4px圆角*/border-radius:50%;/*宽度和高度一致时，为圆*/<divclass="container"><ahref="#">我的购物车</a><divclass="cart"><spanclass="num">12</span></div></div><style>*{

box-sizing:border-box;

}a{text-decoration:none;color:#999;margin:020px;}.container{width:200px;height:40px;

/*文本元素居中：行高等于内容高度（有上下边框）*//*line-height:40px;*/line-height:38px;border:1pxsolid#ccc;/*为购物车图标参考定位*/position:relative;}/*购物车图标：容器任意位置---绝对定位*/.cart{position:absolute;width:20px;height:20px;/*居中计算：内部高度38px（不计边框）：38-20/2*/top:9px;right:40px;

background-image:url('./images/cart_empty.png');background-size:100%100%;}.num{position:absolute;width:20px;height:20px;/*圆角*/border-radius:50%;top:-10px;right:-20px;

/*文本样式*/background-color:red;color:white;font-size:12px;text-align:center;line-height:20px;}/*添加以下样式，则可以将图标移动到左边*/.cart{

left:20px;}a{padding-left:60px;}目标体现（练习）：模拟京东购物车效果鼠标悬停

<body><divclass="container"><ahref="">我的购物车</a><divclass="cart"><spanclass="num">10</span></div><divclass="line"></div><divclass="drop"></div></div>

<style>*{box-sizing:border-box;}.container{width:200px;height:60px;line-height:60px;padding-left:20px;background-color:#ccc;margin:100px;/**/position:relative;/**/border:1pxsolidred;}.container>a{text-decoration:none;background-color:yellow;}.cart{/**/.drop{width:400px;height:200px;border:1pxsolidred;/**/position:absolute;left:-1px;/*top:60px;*/top:58px;/*完全重叠*/display:none;}.line{position:absolute;border:1pxsolidwhite;left:0;right:0;top:58px;z-index:100;display:none;}.container{background-color:white;}.container:hover.drop{display:block;}.container:hover.line{display:block;}</style>width:24px;height:24px;border:1pxsolidred;/**/position:absolute;top:18px;right:40px;}.cart>.num{background-color:red;width:20px;height:20px;line-height:20px;/*注意，行高会继承*//**/position:absolute;left:14px;top:-10px;border-radius:50%;color:white;font-size:10px;text-align:center;}2C).fixed：类似绝对定位,不同的是其相对浏览器窗口定位（特殊的绝对定位），即：固定于页面指定位置；不随页面滚动而滚动；不占据正常块位置；宽度高度由内容决定，也可以改变；默认位置：lefttop为(00)注意：使用left|right|top|bottom之一或组合使其固定在某个位置。相对浏览器窗口定位。有效属性与absolute基本相同，不同之处：absolute相对页面时会随页面滚动.示例5京东侧边栏：相对页面的绝对定位，固定位置fixed的使用行内元素，如span、a等转换为块元素时可以改变宽度和高度；子元素会触发父元素的hover事件；通常使用子元素来撑大父元素<divclass="container"><ul><li><ahref="#"class="link-imgimg1"></a><ahref="#"class="link-txt">优惠券</a></li><li><ahref="#"class="link-imgimg2"></a><ahref="#"class="link-txt">我的购物车</a></li><li><ahref="#"class="link-imgimg3"></a><ahref="#"class="link-txt">客服</a></li></ul></div>*{box-sizing:border-box;}.container{position:fixed;right:0;width:40px;top:0;bottom:0;background-color:#eee;}ul{list-style:none;padding:0;margin:0;/*位置：为了居中显示*/position:absolute;width:100%;

right:0;

/*整体居中显示*/top:50%;margin-top:-60px;}li{position:relative;height:40px;}/*链接图片：无文字，带背景图*/li>a{display:block;height:100%;background-color:#ccc;}.link-img{background-size:60%60%;background-repeat:no-repeat;background-position:center;}.img1{background-image:url('./images/优惠券.png');}.img2{background-image:url('./images/购物车.png');}.img3{background-image:url('./images/客服.png');}

/*链接-提示文本*/.link-txt{position:absolute;width:160px;right:-160px;top:0;background-color:#ccc;

z-index:-1;/*文本对齐*/padding:020px;line-height:40px;}li:hover.link-txt{/*display:block;*/right:0;/*过渡效果*/transition:right1s;}</style>D).

position:sticky作用：在页面/块元素出现滚动条时，元素超过设定的top/left/right/bottom（相对出现滚动条的父容器）值则浮动在页面不滚动

注意：

必须设置top/bottom/left/right值之一；示例6理解sticky及其应用<divstyle="height:400px;border:1pxsolidred;">这是其他内容，模拟页面其他内容，目的使滚动条出现</div><divclass="sticky">这是会浮动的div</div><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><p>滚动的内容，作为参考</p><divstyle="height:400px;border:1pxsolidred;">这是其他内容，模拟页面其他内容，目的使滚动条出现</div><style>.sticky{height:40px;background-color:yellow;/*sticky*/position:sticky;top:100px;}</style>12<body><divstyle="height:800px;background-color:yellowgreen;"></div><divclass="container"><divclass="top"></div><divclass="sticky">sticky</div><divclass="bottom"></div></div><divstyle="height:800px;background-color:yellowgreen;"></div></body><style>/*容器带注释和取消注释的效果，说明：相对具有滚动条的父元素*/.container{overflow:scroll;height:400px;}.top{height:400px;background-color:red;}.sticky{height:100px;background-color:green;

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论