HTML（div块定位）

2024-06-27 13:07| 来源: 网络整理| 查看: 265

HTML（div块定位）

块定位可以通过在选择器内设置position属性实现块在浏览器页面内部的摆放位置，可以自己设置位置绝对定位相对定位相对浏览器定位

一、定位方式

1.绝对定位绝对定位，position属性值为absolute，之后再设置top、right、bottom、left四个方向的值 top和bottom可能会有冲突，不设置其一也可以，左右一样在原有的块标签位置移动之后，原位置被释放，可以被其他块标签占用

.d1,.d2,.d3{ width: 150px; height: 150px; } .d1{ background-color: aquamarine; position: absolute; top:200px; left:200px ; } .d2{ background-color: cadetblue; } .d3{ background-color: darkslategray; }

在这里插入图片描述 2.相对定位相对定位使相对于原来的位置对块标签进行设置，块标签的位置移动之后，原有位置不被释放，不能被其他块占用 position属性值为relative

position: relative; top:150px; left:150px ;

在这里插入图片描述 3.相对浏览器定位块定位之后，忽视浏览器页面的上下滑动，永远都停留在浏览器屏幕的某个位置 position属性值为fixed

.d3{ background-color: darkslategray; position: fixed; top: auto; right: 0px; }

在这里插入图片描述

二、所有源码及结果 1.源码定位 .d1,.d2,.d3{ width: 150px; height: 150px; } .d1{ background-color: aquamarine; position: absolute; top:150px; left:150px ; } .d2{ background-color: cadetblue; position: relative; top:150px; left:150px ; } .d3{ background-color: darkslategray; position: fixed; top: auto; right: 0px; } 1 2 3 2.结果

在这里插入图片描述

【本文地址】

HTML（div块定位）

HTML（div块定位）

今日新闻

推荐新闻