讲给后台程序员看的前端系列教程(25)——定位

最新推荐文章于 2024-06-17 09:10:20 发布
最新推荐文章于 2024-06-17 09:10:20 发布
阅读量498 收藏 5
点赞数
分类专栏： 讲给后台程序员看的前端系列教程 文章标签： CSS 浮动 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lfdfhl/article/details/100664397
版权

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

  • 本文原创作者：谷哥的小弟
  • 作者博客地址：http://blog.csdn.net/lfdfhl

定位(position)的简介

在HTML中，利用定位(position)可较为精确地定义元素显示的位置，这个位置可以是相对于其本身出现的位置，也可以是相对于其上级元素的位置，还可以是相对于其他元素的位置，亦可为相对于浏览器视窗左上角的位置。

定位(position)的语法

position:relative | absolute | static | fixed ;
top | right | bottom | left：Mpx ;

小结如下：

  • 定位(position)常用类型：static、absolute、relative、fixed

  • 定位(position)通常与top、right、bottom、left属性联合使用

  • 定位(position)的使用可能导致元素脱离标准流

现在分别介绍四种常用的定位(position)类型。

static

position:static是CSS中默认的定位类型，在该类型下元素以标准流的显示方式，其位置不受top、bottom、left、right的影响。

请看如下示例：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>static定位</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 510px;
				height: 200px;
				border: 1px solid red;
				background-color: greenyellow;
				position: static;
				left: 50px;
				top: 80px;
			}
		</style>
	</head>

	<body>
		<div></div>
	</body>

</html>

运行后，效果如下图所示：
在这里插入图片描述

在该示例中，在标签选择器div里设置了position:static并且为left和top属性设置了具体的值，但是我们发现：<div></div>的位置没有发生改变。

relative

相对定位position:relative用于设置元素位置，即相对于元素本身原来的位置进行调整。

相对定位特性：

  • 相对于自身原来在标准流中位置而移动
  • 移动后继续占有原来在标准流中的位置
  • 元素设置position:relative后该元素不会脱离标准流

我们先来看一个不设置定位的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无定位</title>
		<style>
			
			.fatherDiv {
				width: 400px;
				height: 500px;
				background-color: pink;
			}
			
			.blueSonDiv{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			
			.greenyellowSonDiv{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
			}

		</style>

	</head>
	<body>
		<div class="fatherDiv">
			<div class="blueSonDiv"></div>
			<div class="greenyellowSonDiv"></div>
		</div>
	</body>
</html>

结果如下：
在这里插入图片描述

接下来，我们为blueSonDiv设置相对定位：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
			
			.fatherDiv {
				width: 400px;
				height: 500px;
				background-color: pink;
			}
			
			.blueSonDiv{
				width: 200px;
				height: 200px;
				background-color: blue;
				/* 相对定位 */
				position: relative;
				top: 30px;
				left: 30px;
			}
			
			.greenyellowSonDiv{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
			}

		</style>

	</head>
	<body>
		<div class="fatherDiv">
			<div class="blueSonDiv"></div>
			<div class="greenyellowSonDiv"></div>
		</div>
	</body>
</html>

运行后，效果如下图所示：
在这里插入图片描述

absolute

绝对定位position:absolute是元素参照带有定位的父级元素实现位置移动。

绝对定位特性：

  • 如果父元素和爷爷元素等上级元素都没有定位，则子元素以浏览器左上角为参照进行定位。
  • 如果父元素或爷爷元素等上级元素有定位，则子元素依据最近的已经定位(绝对、固定或相对定位)的父元素或爷爷元素进行定位。
  • 子元素设置绝对定位后将脱离原来的标准流，在原标准流中亦不再保留其原来的位置

绝对定位示例1

子元素采用绝对定位而父元素无定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			
			/* 父元素无定位 */
			.fatherDiv {
				width: 400px;
				height: 500px;
				background-color: pink;
			}
			
			.blueSonDiv{
				width: 200px;
				height: 200px;
				background-color: blue;
				/* 子元素绝对定位 */
				position: absolute;
				top: 30px;
				left: 30px;
			}
			
			.greenyellowSonDiv{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
			}

		</style>

	</head>
	<body>
		<div class="fatherDiv">
			<div class="blueSonDiv"></div>
			<div class="greenyellowSonDiv"></div>
		</div>
	</body>
</html>

运行后，效果如下图所示：
在这里插入图片描述
从结果中我们可以看到：

  • 1、子元素blueSonDiv以屏幕的左上角为参照进行定位
  • 2、子元素blueSonDiv脱离了标准流

绝对定位示例2

子元素采用绝对定位而父元素采用相对定位(子绝父相)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			
			/* 父元素使用相对定位 */
			.fatherDiv {
				width: 400px;
				height: 500px;
				background-color: pink;
				position: relative;
			}
			
			.blueSonDiv{
				width: 200px;
				height: 200px;
				background-color: blue;
				/* 子元素绝对定位 */
				position: absolute;
				top: 30px;
				left: 30px;
			}
			
			.greenyellowSonDiv{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
			}

		</style>

	</head>
	<body>
		<div class="fatherDiv">
			<div class="blueSonDiv"></div>
			<div class="greenyellowSonDiv"></div>
		</div>
	</body>
</html>

运行后，效果如下图所示：
在这里插入图片描述

从结果中我们可以看到：

  • 1、子元素参照父元素位置移动
  • 2、子元素脱离了标准流

fixed

position:fixed表示固定定位，即相对浏览器窗口定位。采用该定位后，不论页面如何滚动，该盒子显示的位置不变并完全脱离标准流。

请看如下示例：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>fixed定位</title>
		<style type="text/css">
			img {
				width: 20%;
				/* 固定定位 */
				position: fixed;
				left: 300px;
				top: 200px;
			}
			
			.blueDiv{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			
			.greenyellowDiv{
				width: 200px;
				height: 200px;
				background-color: greenyellow;
			}

		</style>
	</head>

	<body>
		<img src="img/girlfriend.jpg"/>
		<div class="blueDiv"></div>
		<div class="greenyellowDiv"></div>
		<div class="blueDiv"></div>
		<div class="greenyellowDiv"></div>
		<div class="blueDiv"></div>
		<div class="greenyellowDiv"></div>
	</body>

</html>

运行后，效果如下图所示：
在这里插入图片描述

在该示例中，在标签选择器img中设置了position:fixed;属性。从效果图中可以看到：图片一直固定在某个位置，当我们拖动滚动条时它的位置仍然保持不变

规避脱标流

有时使用float和position来实现某种效果，但是这很可能导致某些元素脱离标准流(脱标)；所以，应尽可能地避免脱标，可遵守以下原则：

  • 网页布局过程中尽量使用标准流布局
  • 标准流不能解决的问题优先考虑使用浮动
  • 浮动不能解决的问题再考虑使用定位
  • 在子元素中使用margin-left:auto 将其置于父元素的最右边
  • 在子元素中使用margin-right:auto将其置于父元素的最左边
  • 在子元素中使用margin 0 auto;使其在父元素内水平居中显示
谷哥的小弟
关注
专栏目录
讲给后台程序员看的前端系列教程(26)——CSS综合练习
谷哥的小弟
09-09 1430
在本节中，我们对CSS知识进行综合练习
讲给后台程序员看的前端系列教程(24)——浮动
谷哥的小弟
09-09 823
从前面的学习中，我们得知：块级元素(比如：div标签)按照从上至下的顺序独占一行显示；行内元素(比如：span标签)按照从左到右的顺序在同一行显示。这些显示方式方式被称作标准流(normal flow)或者文档流。在标准流中：块级元素纵向有序排列，行内块元素和行内元素横向有序排列。今天我们要学习和讨论的是有别于标准流的浮动(float)，嗯哼，开始吧！
讲给后台程序员看的前端系列教程(12)——CSS概述
谷哥的小弟
09-06 657
CSS即层叠样式表(Cascading Style Sheet)它主要用于网页样式设计，比如：文字的大小，颜色，元素的定位等等。CSS的诞生将页面架构和页面显示进行了分离，各司其责。尤其在HTML5中废除了以往的font标签，big标签，strike标签，建议开发人员把外观的控制交给CSS负责。
讲给后台程序员看的前端系列教程(38)——事件处理
谷哥的小弟
09-12 1万+
事件被看作是JavaScript与网页之间交互的桥梁，当事件发生时，可以通过JavaScript 代码执行相关的操作。例如，用户可以通过鼠标拖曳登录框、改变登录框的显示位置、单击鼠标、双击鼠标等等。其实，在软件开发领域，几乎所有的GUI编程都会涉及到事件机制。比如，我们在Android中非常熟悉的单击，触摸，滑动，双击，长按等等都属于事件的范畴。今天我们就来学习JavaScript中事件处理机制。
讲给后台程序员看的前端系列教程(40)——canvas
谷哥的小弟
09-17 535
在HTML5新增了canvas标签用于绘制图形，比如：文本、几何图形、路径、图片等等。该标签和其他HTML标签比起来没有多大的不同，除了指定常见的id、class、style等通用属性外，还可以通过height属性和width属性指定canvas的高和宽。嗯哼，我们先来看一个canvas的入门示例：
讲给后台程序员看的前端系列教程(34)——对象
谷哥的小弟
09-10 1167
在看到"对象"这两个字的时候，很多人会立马会联想到Java中的类、对象、继承、封装、多态…打住，打住，不要继续往下想了。在这或许要抛弃一下我们的惯性思维了。JavaScript并不是完全纯粹的面向对象，或者说它和大家熟知的Java中的面向对象不完全一样。在JavaScript中所有东西，比如：字符串、数字、数组、日期，甚至函数都是对象。
讲给后台程序员看的前端系列教程(36)——BOM
谷哥的小弟
09-11 907
在实际开发中，JavaScript经常需要操作浏览器窗口及窗口上的控件，实现用户和页面的动态交互。为此，浏览器提供了一系列内置对象，统称为浏览器对象；各内置对象之间按照层次组织起来的模型统称为浏览器对象模型Browser Object Model简称BOM，其架构如下图所示：
讲给后台程序员看的前端系列教程(51)——Bootstrap分页
谷哥的小弟
10-18 515
在本节教程中，我们介绍Bootstrap提供的分页及其样式。
讲给后台程序员看的前端系列教程(44)——Ajax
谷哥的小弟
09-20 611
Ajax是Asynchronous JavaScript And XML的缩写，即异步JavaScript和XML技术。它并 不是一门新的语言或技术，而是由JavaScript、XML、DOM、CSS、网络通信等多种已有技术组合而成的一种浏览器端技术，它主要用于实现与服务器进行异步交互的功能。在传统的Web应用模式中每当用户触发一个页面切换或刷新HTTP请求时，就需要服务器返回一个新的页面。即便在网页中所有的格和图片都资源没有发生改变仅仅只有少量数据发生变化的情况下依然要从服务器重新加载整个网页。显示，这是
失败的程序员生涯系列（3）——第一次搭建商业化系统
最新发布
大梁来了的博客
06-17 521
入行搭建的第一个团购网站和源码改动，屁颠屁颠的上线了。赶鸭子上架，但是这是绝大部分刚毕业和低待遇招人搞的系统的原型。他们什么都没考虑，就是demo上线，这个很符合2016年之前的项目的情形，先上了再说。
2023高薪前端面试题（一、前端基础——HTTP/HTML/浏览器）
iaz999的博客
04-29 3229
语义化就是构成HTML结构的标签要有意义。比如有这样的标签：header表示页面头部main表示页面主题footer表示页面底部那么这些标签构成的HTML结构就是有意义的，也是语义化的。​ 如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
程序员的成长课
GitChat
04-12 4925
内容介绍 知道和做到之间有一道鸿沟，要想跨越它，你不但要努力，还要讲究方法。《程序员的成长课》不仅传授知识，更教给读者如何做好。《程序员的成长课》中的理念、方法、工具可以指导读者更好地看清定位及发展方向，设计未来。如果读者不知道选择什么技术栈来学习，困惑于怎样在技术上持续精进，想转技术管理却没途径，想有章法地为跳槽加薪做准备，或者想转型却不知道自己除了技术还能干什么，建议认真读本书，它提供的方法和...
web前端面试题（必背面试题）
Z_Gleng的博客
05-25 3万+
自己总结的常见的面试题 总字数13万+ 大概有200+左右道题 会不定期更新
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
热门推荐
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
讲给后台程序员看的前端系列教程(01)——HTML5概述
谷哥的小弟
09-04 1296
大概两年前我写了《讲给Android程序员看的前端和后台教程》；在该专栏中介绍了前端开发基本技能，例如：HTML5、CSS、JavaScript等等。随着技术的更新和迭代，我决定在此基础之上重写此系列教程以供工作和学习之需。本系列教程概述如下：主要内容为前端基础知识和常用框架、每篇博客均附示例源码及运行效果截图、本系列教程免费，欢迎转载
讲给后台程序员看的前端系列教程(02)——HTML5标签(1)
谷哥的小弟
09-04 1201
HTML不是程序设计语言，而是一种标记语言，它用一些标记、标签来说明文本的显示效果。要制作网页和建立网站，就必须对HTML语言有所了解。客观地讲：HTML标签没有多少逻辑性而言，为了大家更好的理解和记忆，我们对这些标签进行分门别类的讲解，主要分为：
讲给后台程序员看的前端系列教程(39)——正则表达式
谷哥的小弟
09-15 1062
正则表达式(Regular Expression,简称RegExp)是一种描述字符串结构的语法规则，是一个特定的文本模式，用于验证各种字符串是否匹配这个特征，进而实现文本查找、替换、截取内容等操作。正则表达式的应用范围非常之广泛，最初是由Unix普及开来的，后来在广泛运用于Scala 、PHP、C# 、Java、C++ 、Objective-c、Perl 、Swift、VBScript 、Javascript、Ruby以及Python等等。
讲给后台程序员看的前端系列教程(30)——运算符与表达式
谷哥的小弟
09-09 995
JavaScript提供了丰富的运算符，比如：算数运算符，赋值运算符，比较运算符，逻辑运算符等等。在此，介绍JavaScript中常用的运算符和表达式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谷哥的小弟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值