HTML5元素定位

1.元素定位

为了实现网页整体布局,我们先要知道,一个元素,是如何定位到页面上的某个位置的,这就是元素定位。

元素定位有四种,可以使用position样式来设置元素定位,所以此属性值有四种:

  1. static:静态定位(默认)。依据文档流定位。
  2. relative:相对定位。以自身为基准,设置坐标(left、top、right、bottom),不脱离文档流。
  3. absolute:绝对定位。以父元素为基准,设置坐标(left、top、right、bottom),脱离文档流。
  4. fixed:固定定位。以浏览器窗口为基准,设置坐标(left、top、right、bottom),脱离文档流。

1.1.静态定位(文档流定位)

静态定位:默认。依据文档流定位。

特点:

  1. 将页面上的元素,按照html的书写顺序,从上到下,从左到右,依次排列。
  2. 内联元素不独占一行,块级元素独占一行。
html 复制代码
<p>这是一个p标签</p>
<a href="">跳转百度</a>
<span>这是一个内联的span标签</span>
<ul>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>

1.2.相对定位

相对定位:以自身为基准,设置坐标(left、top、right、bottom),不脱离文档流。

特点:

  1. 以自身为基准定位。
  2. 不脱离文档流。也就是说:相对定位元素仍然会被文档流中的其它元素所影响。
  3. 根据坐标定位到新位置之后,并不回收原位置空间。
html 复制代码
<style>
    .one{
        width: 200px;
        height: 100px;
        background-color: red;
        position: relative;
        left: 100px;
        top:50px;
    }
</style>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<div class="one"></div>

1.3.绝对定位

绝对定位:以父元素为基准,设置坐标,脱离文档流。

特点:

  1. 脱离文档流。也就是说:绝对定位元素将不在被文档流中的其它元素所影响。
  2. 根据坐标定位到新位置之后,原位置空间会被回收。
  3. 如果父元素也为relative或absolute定位,那么就以父元素为基准。
  4. 如果父元素不是relative定位,也不是absolute定位,那么一律以body为基准。
html 复制代码
<style>
    .one{
        width: 200px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 100px;
        top:50px;
    }
</style>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<p>这是一个p标签</p>
<div class="one"></div>

1.4.固定定位

固定定位:以浏览器窗口为基准,设置坐标(left、top、right、bottom),脱离文档流。

特点:

  1. 元素始终固定在某个坐标位置,body以及body中的任何元素都不会对其产生任何影响。
html 复制代码
<style>
    .one{
        width: 100%;
        height: 60px;
        background-color: red;
        position: fixed;
        left: 0;
        top:0;
    }
</style>
<div class="one">header</div>
<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>
<p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p><p>这是一个p标签</p>

1.5.元素定位总结

  1. 绝对定位不能有效扩展和维护。只能应用在某个局部。
  2. 相对定位只限制自身,只能应用在某个局部。
  3. 固定定位只限制自身,只能应用在某个局部。
  4. 所以在实际开发中,都使用文档流定位来进行页面布局,就是静态定位(默认)。它能够随着页面元素的变化而自动调节。

1.6.z-index样式

绝对定位元素与固定定位元素脱离了文档流,可以把它想象为:此元素漂浮在网页上方。 那么,当这些元素位置有重叠时,就会出现:元素之间如何覆盖的问题。此问题可以使用z-index样式来解决。

z-index样式的值是一个整形数,就表示元素所在的层级。

html 复制代码
<style>
    .one{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0;
        top:0;
        z-index: 2;
    }
    .two{
        width: 200px;
        height: 200px;
        background-color: blue;
        position: absolute;
        left: 100px;
        top:100px;
        z-index: 1;
    }
</style>
<div class="one"></div>
<div class="two"></div>
相关推荐
MiyueFE22 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子26 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计