HTML5元素定位的介绍_F11 - 专业站长和开发者的学习网站

本站首页收藏本站

广告位联系

APP正在开发中...

返回顶部

分享到

HTML5元素定位的介绍

html5 来源：互联网作者：佚名发布时间：2024-10-23 21:42:49 人浏览

摘要

1.元素定位为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。元素定位有四种，可以使用position样式来设置元素定位，所以此属性值有

1.元素定位

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

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

static：静态定位（默认）。依据文档流定位。
relative：相对定位。以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。
absolute：绝对定位。以父元素为基准，设置坐标（left、top、right、bottom），脱离文档流。
fixed：固定定位。以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

1.1.静态定位（文档流定位）

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

特点：

将页面上的元素，按照html的书写顺序，从上到下，从左到右，依次排列。
内联元素不独占一行，块级元素独占一行。

<p>这是一个p标签</p>

<span>这是一个内联的span标签</span>

<ul>

<li>javascript</li>

</ul>

1.2.相对定位

相对定位：以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。

特点：

以自身为基准定位。
不脱离文档流。也就是说：相对定位元素仍然会被文档流中的其它元素所影响。
根据坐标定位到新位置之后，并不回收原位置空间。

<style>

.one{

width: 200px;

height: 100px;

background-color: red;

position: relative;

left: 100px;

top:50px;

}

</style>

<p>这是一个p标签</p>

1.3.绝对定位

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

特点：

脱离文档流。也就是说：绝对定位元素将不在被文档流中的其它元素所影响。
根据坐标定位到新位置之后，原位置空间会被回收。
如果父元素也为relative或absolute定位，那么就以父元素为基准。
如果父元素不是relative定位，也不是absolute定位，那么一律以body为基准。

<style>

.one{

width: 200px;

height: 100px;

background-color: red;

position: absolute;

left: 100px;

top:50px;

}

</style>

<p>这是一个p标签</p>

1.4.固定定位

固定定位：以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

特点：

元素始终固定在某个坐标位置，body以及body中的任何元素都不会对其产生任何影响。

<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>

1.5.元素定位总结

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

1.6.z-index样式

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

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

<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>

您可能感兴趣的文章 :

原文链接 :

Tag : html5(166)

HTML5实现本地摄像头拍照与照片上传的方法介绍

HTML5通过input type=file标签及其capture属性，允许网页调用本地摄像头进行拍照，提升了用户交互体验。本文将详细介绍如何使用HTML5和JavaScri
HTML5元素定位的介绍

1.元素定位为了实现网页整体布局，我们先要知道，一个元素，是如何定位到页面上的某个位置的，这就是元素定位。元素定位有四种，可
html5浏览器中实现高德地图定位功能(推荐)

HTML5是当前Web开发中最常用的技术之一，而地图应用又是其中一个非常常见的需求。高德地图是国内最受欢迎的地图服务提供商之一，他们提
使用HTML5新增的表单元素来增强表单功能介绍

随着HTML5标准的推广和普及，网页表单的设计也得到了极大的改进。HTML5引入了许多新的表单控件和属性，不仅提升了用户体验，还简化了前
HTML5中Checkbox标签介绍

在HTML5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本文将深入解析Checkbox标签的基本属性、样式自
HTML5中使用Noto Sans CJK字体的步骤

在HTML5中使用Noto Sans CJK字体的详细指南在网页设计中，字体选择对用户体验至关重要。Noto Sans CJK是 Google 提供的一个优秀的免费字体系列，
HTML5表单的自动验证、取消验证、自定义错误信息

1、自动验证通过在元素中使用属性的方法，该属性可以实现在表单提交时执行自动验证的功能。下面是关于对元素内输入内容进行限制的属
Html5播放hls格式的视频代码

一、什么情况下需要播放当前端需要嵌入设备视频，比如用到魔镜、萤石云、海康威视等平台，怎么能将视频地址在前端页面中播放呢，这
HTML5使用＜blockquote＞标签实现段落缩进效果

使用blockquote标签可以实现页面文字的段落缩进。这一标签也是每使用一次，段落就缩进一次，并且可以嵌套使用，以达到不同的缩进效果。
HTML5 Canvas实现在线签字功能的介绍

在现代互联网应用中，有时我们需要让用户在网页上进行签字操作，比如确认文件、填写电子表格或者签署合同。利用 HTML5 的 canvas 画布，