使用CSS定位HTML元素的实现方法


Posted in HTML / CSS onJuly 07, 2022

在页面上定位内容时,可以使用一些属性来帮助您操纵元素的位置。本文将向您展示一些使用 CSSposition 属性包含不同定位元素类型的示例。要在元素上使用定位,您必须首先声明它的 position property,它指定用于元素的定位方法的类型。使用 position 属性值,使用 top、bottom、left 和 right 属性定位元素。它们的工作方式也不同,具体取决于它们的位置值。

定位值有五种类型:

  • 静止的
  • 相对的
  • 固定的
  • 绝对

静止的

HTML元素默认是静态定位的,元素按照文档的正常流程定位;静态定位元素不受 top、bottom、left 和 right 属性的影响。具有位置的元素:静态;没有以任何特殊方式定位

用于将位置设置为静态的 CSS 是:

position: static;

接下来是使用静态位置值的示例:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: WHITE;
  font:  Helvetica;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  position: static;
  background: Green;
  height: 70px;
  line-height: 40px;
  text-align: center;
  width: 90px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

使用CSS定位HTML元素的实现方法

相对的

元素根据文档的正常流程定位,相对于其正常位置进行定位,然后 根据顶部、右侧、底部和左侧的值相 对于自身进行偏移。偏移量不影响任何其他元素的位置;因此,页面布局中为元素指定的空间与位置是静态的相同。设置相对定位元素的 top、right、bottom 和 left 属性将导致它被调整远离其正常位置。其他内容不会被调整以适应元素留下的任何间隙。

用于将位置设置为相对的 CSS 是:

position: relative;

下面的示例使用相对位置值:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: white;
  font:   Helvetica ;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  background: green;
  height: 70px;
  line-height: 40px;
  position: relative; 
  text-align: center;
  width: 80px;
}
.square-1 {
    top: 15px;
  }
.square-2 {
  left: 50px;
}
.square-3 {
  bottom: -23px;
  right: 30px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

使用CSS定位HTML元素的实现方法

绝对

该元素将从正常的文档流中移除,并且在页面布局中,不会为该元素创建空间。元素相对于最近的定位祖先(如果有的话)定位;否则,它相对于初始包含块放置,其最终位置由顶部、右侧、底部和左侧的值确定。

用于将位置设置为绝对的 CSS 是:

position: absolute;

一个元素position: absolute; 相对于最近定位的祖先进行定位。如果绝对定位元素没有定位的祖先,它使用文档正文,并与页面滚动一起移动。“定位”元素的位置不是static.

下一个例子强调元素的绝对位置:

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
  color: WHITE;
  background: darkgrey;
  height: 200px;
  position: relative;
  border-radius: 15px;
  font:  Helvetica ;
  width: 420px;
}
.square {
  background: green;
  height: 80px;
  position: absolute;
  width: 80px;
  border-radius: 15px;
  line-height: 60px;
}
.square-1 {
  top: 10%;
  left: 6%;
}
.square-2 {
  top: 5;
  right: -20px;
}
.square-3 {
  bottom: -15px;
  right: 40px;
}
.square-4 {
  bottom: 0;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

使用CSS定位HTML元素的实现方法

固定的

从正常文档流中删除的元素,并且在页面布局中,没有为元素创建空间。元素相对于由视口建立的初始包含块定位,其最终位置由值 top、right、bottom 和 left 确定。此值始终创建一个新的堆叠上下文。

用于将位置设置为固定的 CSS 如下所示:

position: fixed;

元素position: fixed; 相对于视口定位,这意味着即使页面滚动,它也始终保持在同一位置。top、right、bottom 和 left 属性用于定位元素。

元素按照文档的正常流程定位,然后根据top、right、bottom和left的值,相对于其最接近的升序块级进行偏移,包括与表格相关的元素。偏移量不会影响任何其他元素的位置。

此值始终创建一个新的堆叠上下文。请注意,粘性元素“粘”到其最近的具有“滚动机制”的祖先,即使该祖先不是最近的实际滚动祖先。

用于将位置设置为粘性的 CSS 是:

position: sticky;

元素position: sticky; 的定位基于用户的滚动位置,relative 并fixed 根据滚动位置在位置之间切换。

重叠元素

网页上的重叠元素对于突出、宣传和关注我们网页上的重要内容非常有用。使元素覆盖在您的网站上是非常有用且非常有价值的功能设计实践。当元素被定位时,它们可以与其他元素重叠,所以要指定顺序(什么元素应该放在其他元素的前面或后面),我们应该使用 z-index 属性。具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。请注意,z-index 属性仅适用于定位元素(位置:绝对、位置:相对或位置:固定)。

下一个示例显示 z-index 属性如何在不同的正方形上工作:

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
  color: white;
  background: purple;
  height: 170px;
  position: relative;
  border-radius: 15px;
  font:  Helvetica;
  width: 400px;
}
.square {
  background: orange;
  border: 4px solid goldenrod;
  position: absolute;
  border-radius: 15px;
  height: 80px;
  width: 80px;
}
.square-1 {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.square-2 {
  position: absolute;
  z-index: 2; 
  background: black;
  width: 65%;
  left: 60px;
  top: 3em;
}
.square-3 {
  position: absolute;
  z-index: 3; 
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
 
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
</div>
</body>
</html>

使用CSS定位HTML元素的实现方法

在图像上定位文本

下面的示例使用上述 CSS 定位值在图像上覆盖一些文本:

<!DOCTYPE html>
<html>
<head>
<style>
.module{
  background: 
    linear-gradient{
      rgba(0, 4, 5, 0.6),
      rgba(2, 0, 3, 0.6)
    ),
    url(http://www.holtz.org/Library/Images/Slideshows/Gallery/Landscapes/43098-DSC_64xx_landscape-keltern-1_wall.jpg);
  background-size: cover;
  width: 600px;
  height: 400px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.mid h3 {
  font-family: Helvetica;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  margin: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  font-size: 3rem;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="module mid">
  <h3>Wild nature</h3>
</div>
</body>
</html>

使用CSS定位HTML元素的实现方法

结论

在本文中,我们描述并给出了 CSS 定位类型的示例,并描述了如何重叠元素并在图像上添加一些文本。

到此这篇关于使用CSS定位HTML元素的实现方法的文章就介绍到这了,更多相关CSS定位HTML元素内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5在canvas中绘制复杂形状附效果截图
Jun 23 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
CSS 实现磨砂玻璃(毛玻璃)效果样式
May 21 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 #HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 #HTML / CSS
CSS 实现角标效果的完整代码
Jun 28 #HTML / CSS
CSS SandBox应用场景及常见问题
CSS的calc函数用法小结
Jun 25 #HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 #HTML / CSS
css3手动实现pc端横向滚动
Jun 21 #HTML / CSS
You might like
PHP 类型转换函数intval
2009/06/20 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
js实现简单秒表走动的时钟特效
2020/03/25 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
js get和post请求实现代码解析
2020/02/06 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
python实现人人自动回复、抢沙发功能
2018/06/08 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Django跨域请求原理及实现代码
2020/11/14 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
交通安全演讲稿
2014/01/07 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
团队队名口号大全
2014/06/06 职场文书
保险公司演讲稿
2014/09/02 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
学校开学标语
2014/10/06 职场文书