建设包包网站的目的,企业seo职位,软件开发公司流程,万维网站域名定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置#xff0c;并且可以压住其他盒子。
定位 定位模式 边偏移
定位模式说明static静态定位,按标准流特性摆放,没有边偏移,很少用relative相对定位,相对自身原有位置移动,原有位置继续占有#xff08;不脱标…定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置并且可以压住其他盒子。
定位 定位模式 边偏移
定位模式说明static静态定位,按标准流特性摆放,没有边偏移,很少用relative相对定位,相对自身原有位置移动,原有位置继续占有不脱标absolute绝对定位 ,相对祖先元素移动位置脱标fixed固定定位, 以浏览器的可视窗口为位置参照 脱标sticky粘性定位兼容性较差IE不支持
绝对定位特点: 1如果没有祖先元素或者祖先元素没有定位则定位以浏览器为准。 2如果祖先元素有定位(相对、绝对、固定定位则以最近一级的有定位祖先元素为参考点移动位置。 3.绝对定位不再占有原先的位置。(脱标
粘性定位特点 1.以浏览器的可视窗口为位置参照占有原先位置是绝对定位和相对定位的混合。 2.必须添加top,bottom,left,right中的一个才有效。 子绝父相 如果子级使用绝对定位,则父级需要使用相对定位.
定位叠放次序z-index z-index:1; z轴高度数值越大越靠上可以为正数、零、负数默认为auto。如果属性值相同则按照书写的顺序后来者居上。只有定位的盒子才有这个属性数值后面不能加单位。 注意 1.加了绝对定位的盒子不能通过margin:0 auto;来水平居中。 2.脱标的盒子浮动元素、绝对定位、固定定位不会触发外边距合并。 3.浮动元素会压住下方标准流的盒子但不会压住盒子里的文字或图片。绝对定位、固定定位的盒子会压住下方的所有内容。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}.div1 {margin: 10px auto;height: 3000px;width: 600px;background-color: pink;line-height: 30px;}.father {/* 父相,相对原有位置下降30px,即这里设置的行高大小,原有位置继续占有,下一个p标签显示在这个div的下方 */position: relative;top: 30px;background-color: skyblue;height: 300px;}.son {/* 子绝,不占有原有位置,下方文字向上对齐,子级盒子覆盖部分文字 */position: absolute;top: 0px;left: 200px;background-color: aquamarine;width: 100px;height: 100px;}.div1 p {/* p标签在其原有位置正好被father块完全覆盖,设置20px的上margin,使得文字显示了2/3 */margin-top: 20px;background-color: skyblue;}.div2 {position: fixed;bottom: 20px;right: 20px;height: 100px;width: 100px;background-color: aquamarine;}.div3 {/* 固定在版心旁的盒子 */position: fixed;top: 30px;/*1.走浏览器宽度的一半 */right: 50%;/* 2.利用margin,走版心的一半空隙 */margin-right: 310px;height: 100px;width: 50px;background-color: aquamarine;}/style
/headbodydiv classdiv1版心盒子div classfatherdiv classson绝对定位的子级盒子/div版心里的相对定位父级盒子br................................................................................................................................../divp父级盒子后面的块元素/p/divdiv classdiv2相对浏览器可视窗口固定的盒子/divdiv classdiv3相对版心固定的盒子/div
/body/html显示效果
