前端位置布局汇总

HTML中脱离文档流的元素有:

  1. position: absolute - 元素相对于最近的已定位(非 static)祖先元素定位。

  2. position: fixed - 元素相对于浏览器窗口定位。

  3. float: left 或 float: right - 元素向左或向右浮动,周围的内容会环绕它。

没有脱离文档流的元素是:

  1. position: static - 默认定位方式,不脱离文档流。

  2. position: relative - 元素相对于正常位置定位,但不脱离文档流。

    static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级,这是默认值。
    relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。
    absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位。选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,absolute元素将以body坐标原点进行定位,可以通过z-index进行层次分级。
    fixed(固定定位) 这里所固定的参照对像是可视窗口而并非是body或是父级元素,其总是固定在浏览器窗口的某个位置,并且不受滚动的影响,是绝对的坐标定位。可通过z-index进行层次分级。

绝对位置

style="position: absolute;left: 218px;top: 0%;"

style="position: absolute;bottom:5px;right:5px ;"

 float 

<a href="/home/">
<button  style="float:right;background-color:#353c48;color:white">主页</button>
</a>

相对位置 :margin外边距  padding内边距

style="border:1px solid black;width:200px;text-align:left;margin-left:1200px;padding-left:10px"

 修改width:500px,height 同

 修改text-align: right

修改margin-left :200px

margin-left:-webkit-calc(50% - 100px)  注意减号左右的空格

修改padding-left :200px

相关推荐

  1. 前端缓存的位置

    2024-07-09 22:10:05       49 阅读
  2. 前端部署汇总

    2024-07-09 22:10:05       35 阅读
  3. 前端】常见问题汇总

    2024-07-09 22:10:05       30 阅读
  4. 前端CSS基础12(布局

    2024-07-09 22:10:05       28 阅读
  5. 前端之Flex 布局

    2024-07-09 22:10:05       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-09 22:10:05       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-09 22:10:05       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-09 22:10:05       58 阅读
  4. Python语言-面向对象

    2024-07-09 22:10:05       69 阅读

热门阅读

  1. [C++][CMake][生成可执行文件][下]详细讲解

    2024-07-09 22:10:05       24 阅读
  2. ubuntu防火墙指定端口开放设置

    2024-07-09 22:10:05       21 阅读
  3. ubuntu20.04安装ros1

    2024-07-09 22:10:05       18 阅读
  4. 代码随想录算法训练营:26/60

    2024-07-09 22:10:05       25 阅读
  5. leetcode77组合——经典回溯算法

    2024-07-09 22:10:05       18 阅读
  6. 算法训练营day67

    2024-07-09 22:10:05       25 阅读
  7. 代码随想录第7天 454 、 383 、15、18

    2024-07-09 22:10:05       25 阅读
  8. react中jsx的语法规则

    2024-07-09 22:10:05       26 阅读
  9. transformer的了解

    2024-07-09 22:10:05       22 阅读
  10. Pytest中的钩子函数

    2024-07-09 22:10:05       22 阅读
  11. Vue-插值表达式

    2024-07-09 22:10:05       22 阅读
  12. Python加密利器:如何用hashlib和base64锁住你的数据

    2024-07-09 22:10:05       23 阅读