《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 18.定位

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1认识定位02相对定位03绝对定位04固定定位目录contents05粘性定位PART1认识定位以下效果如何实现

使用标准流或者浮动能实现吗？元素可以自由的在一个盒子内移动位置，并且压住其他盒子?

使用标准流或者浮动能实现吗？元素可以自由的在一个盒子内移动位置，并且压住其他盒子?使用标准流或者浮动能实现吗？滚动屏幕，位置固定以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。定位的作用定位=定位模式+边偏移定位：将盒子定在某一个位置，按照定位的方式移动盒子。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。定位的组成定位模式决定元素的定位方式，它通过CSS的position属性来设置定位模式值描述absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位元素的位置通过“left”，“right”以及“bottom”属性进行规定fixed生成绝对定位的元素，相对于浏览器窗口进行定位元素的位置通过“left”，“top”“right”以及“bottom”属性进行规定relative生成相对定位的元素，相对于其正常位置进行定位。因此，“left：20”会向元素的LERT位置添加20像素sticky生成粘性定位的元素，依赖于用户的滚动。元素默认就像相对定位;而当页面滚动超出目标区域时，它的表现就像固定定位，会固定在目标定位的位置上static默认值。没有定位inherit规定应该从父元素继承position属性的值边偏移就是定位的盒子移动到最终位置。有top、bottom、left和right4个属性。边偏移边偏移属性示例

描述toptop：10px顶端偏移量，定义元素相对于父元素上边线的距离bottombottom：20px底部偏移量，定义元素相对于父元素下边线的距离leftleft：30px左侧偏移量，定义元素相对于父元素左边线的距离rightright：40px右侧偏移量，定义元素相对于父元素右边线的距离PART2相对定位相对定位是元素在移动位置的时候，是相对于它自己原来的位置来移动的（自恋型）。语法：相对定位relative（重点）选择器{position:relative;}特点：（1）它是相对于自己原来的位置来移动的。（2）移动后原来在标准流的位置继续保留，后面的盒子仍然以标准流的方式对齐。相对定位relative粉色盒子设置相对定位后边偏移top:100px,left:100px,起点是自己原来的位置移动后，原位置保留对下面的盒子没有影响100px100pxPART3绝对定位绝对定位是元素在移动位置的时候，是相对于它父级或（祖先级）元素来移动的。语法：

绝对定位absolute（难点）语法：选择器{position：absolute；}特点：（1）如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。（2）如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。（3）绝对定位不再保留原先的位置，所以绝对定位是脱离标准流的。则设置绝对定位后，边偏移以浏览器为参照，移动后原位置不保留。对后面的盒子有影响。100px100px图一粉色盒子（没有父级元素）图二粉色盒子（有父级元素但是父元素没有定位）图三粉色盒子（有父级元素父元素有定位）100px100px则设置绝对定位后，边偏移以父级元素为参照，移动后原位置不保留。对后面的盒子有影响。问题1：绝对定位和相对定位到底什么场景使用呢？问题2：为什么说相对定位的作用是给绝对定位当父亲呢？

子绝父相的由来这就是子绝父相的由来，父容器需要布局占位，所以是相对定位。若子容器只需要参照父元素进行移动，而不需要保留原来的位置，则是绝对定位。子级绝对定位，不会占有位置，可以放到父元素里面的任何一个地方，不会影响其他的兄弟元素。父元素需要加定位以限制子元素在父元素内的显示位置。父元素布局时，需要占有位置，因此父亲只能是相对定位。任务实践任务

轮播图案例运用图像、链接、列表和布局标签，以及盒模型、定位等属性编写出轮播图结构任务实践任务

仿土豆视频案例运用图像、链接、列表和布局标签，以及盒模型、定位等属性编写仿土豆视频案例PART4固定定位固定定位是元素固定于浏览器可视区的位置，在浏览器页面滚动时元素的位置不发生改变。语法：固定定位fixed语法：选择器{position：fixed；}特点：（1）以浏览器的可视窗口为参照点移动元素，跟父元素没有任何关系，不随滚动条滚动。（2）固定定位不再占有原先的位置。固定在顶部

bootstrap:框架中添加.navbar-fixed-top类可以让导航条固定在顶部固定定位小技巧：固定在版心右（左）侧位置。算法：1.让固定定位的盒子left:50%.走到浏览器可视区（也可以看做版心）的一半位置。2.让固定定位的盒子margin-left:版心宽度的一半距离。多走版心宽度的负方向一半（负方向一半）位置就可以让固定定位的盒子贴着版心右（左）侧对齐了。left:50%margin-left加了绝对定位的盒子margin:0auto水平居中失效，可以通过以下计算方法实现水平和垂直居中。1.left:50%;让盒子的左侧移动到父级元素的水平中心位置。2.margin-left:-100px;让盒子向左移动自身宽度的一半。left:50%margin-left：（自己宽度的一半）固定定位fixed的盒子居中问题PART5粘性定位粘性定位可以被认为是相对定位和固定定位的混合。语法：粘性定位sticky语法：选择器{position：sticky；top：10px；}特点：（1）以浏览器的可视窗口为参照点移动元素（固定定位特点）。（2）粘性定位占有原先的位置（相对定位特点）。（3）必须添加top、left、right、bottom其中一个才有效。（4）跟页面滚动搭配使用。粘性定位sticky定位模式小结定位模式是否脱标（占位置）移动参照点是否常用静态定位——static否不能使用边偏移很少相对定位——relative否相对自身位置移动常用绝对定位——absolute是带有定位的祖先级元素常用固定定位——fixed是浏览器可视区常用粘性定位——sticky否浏览器可视区较少定位模式小结1.行内元素添加绝对或者固定定位，可以直接设置高度和宽度。2.块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。3.

浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题。4.

浮动只会压住它下面标准流的盒子，但不会压住下面标准流盒子里面的文字（图片），但是绝对定位（固定定位）会压住下面标准流所有的内容。任务实践任务1定位综合练习在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)定位叠放次序z-index

数值可以是正整数、负整数或0,默认是auto，数值越大，盒子越靠上如果属性值相同，则按照书写顺序，后来居上数字后面不能加单位只有定位的盒子才有z-index属性语法：选择器{z-index:1;}定位叠放次序z-index默认显示用z-index改变层叠次序定位叠放次序运用1.标准流可以让盒子上下排列或者左右排列，垂直的块级盒