css四种定位详解并附有代码展示及效果

el/2024/2/25 23:23:11

css定位

css定位分为四种不同类型,position的值为static,relative,absolute,fixed

1.static (静态定位)

它是默认值,元素框正常生成的,top left bottom right这几个偏移属性不会影响其静态定位的正常显示。

代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>静态定位</title><style type="text/css">.big{width: 900px;height: 600px;background-color: yellow;}.small{width: 450px;height: 300px;background-color: aquamarine;position: static;left: 80px;}</style>
</head>
<body><div class="big"><div class="small"></div></div>
</body>
</html>

效果展示

你们家分店在这里插入图片描述

代码解说

在这个相对定位代码中,有两个div块,其中名为small的div是名为big的div的子级,在他们的css中我给名为small的div设置了static(静态定位),同时也设置了left属性值,从效果图中可以看出它是不起任何作用,并没有影响它原来的位置。

relative(相对定位)

生成相对定位的元素,相对于正常位置进行定位,也就是说相对于本身位置进行定位,用left,right,top,bottom进行该元素位置偏移。

代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>相对定位</title><style type="text/css">.big{width: 900px;height: 600px;background-color: yellow;}.small{width: 450px;height: 300px;background-color: aquamarine;position: relative;left: 80px;}</style>
</head>
<body><div class="big"><div class="small"></div></div>
</body>
</html>

效果展示

在这里插入图片描述

absolute(绝对定位)

生成绝对定位的元素,它是相对于static定位以外第一个父级元素进行定位。前提是它的父级元素设置了除static定位外的定位,如relative或absolute或fixed,那么它才会根据它的父级进行定位。如果它的父级也没有设置的话,就要看父级的父级有没有设置了,以此类推,总之,它的定位是相对于它的第一个设置除static定位外的定位的父级进行,如果都没有设置的话,他将根据body来定位(并非浏览器,fixed定位才是根据浏览器窗口进行定位)。它也是用left,right,top,bottom属性值进行设置去令它偏移到想要的位置上。

代码展示

<!-- 这是给它的父级元素没有设置除static定位外的定位 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style type="text/css">.big{width: 600px;height: 300px;background-color: yellow;}.small{width: 150px;height: 150px;background-color: aquamarine;position: absolute;left: 80px;bottom: 400px;}</style>
</head>
<body><div class="big"><div class="small"></div></div>
</body>
</html><!-- 这是给它的父级元素设置了除static定位外的定位 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style type="text/css">.big{width: 600px;height: 300px;background-color: yellow;position: relative;}.small{width: 150px;height: 150px;background-color: aquamarine;position: absolute;left: 80px;bottom: 40px;}</style>
</head>
<body><div class="big"><div class="small"></div></div>
</body>
</html>

效果展示

在这里插入图片描述
在这里插入图片描述

fixed(固定定位)

生成固定定位元素,相对于浏览器窗口进行定位。并且他不会随着浏览器的滚动条的滚动而改变位置。它也是用left,right,top,bottom属性值进行设置去令它偏移到想要的位置上。

代码展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绝对定位</title><style type="text/css">body{height: 3000px;}.big{width: 600px;height: 300px;background-color: yellow;position: relative;}.small{width: 150px;height: 150px;background-color: aquamarine;position: fixed;left: 80px;bottom: 40px;}</style>
</head>
<body><div class="big"><div class="small"></div></div>
</body>
</html>

效果展示

在这里插入图片描述
在这里插入图片描述


http://www.ngui.cc/el/4893724.html

相关文章

css高度塌陷及解决方法

css高度塌陷及解决方法 为什么会出现高度塌陷&#xff1f; 1.父元素高度自适应&#xff0c;子元素 float 后&#xff0c;只要子元素脱离了文档流后&#xff0c;造成父元素高度为0&#xff0c;称为高度塌陷问题。 2.在文档流中&#xff0c;父元素的高度默认是被子元素撑开的&a…

jQuery的基于本地存储的增加和删除操作

jQuery的添加和删除 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" conte…

js-构造函数

一、什么是构造函数 构造函数其实是一种特殊的函数&#xff0c;主要用来初始化对象&#xff0c;也就是为对象成员变量赋初始值&#xff0c;它总与new关键字一起使用。我们可以把对象里面一些公有的属性和方法抽象出来封装到这个构造函数里面。这样我们就可以通过一个构造函数创…

js中的作用域与作用域链

作用域 理解 就是一块“地盘”&#xff0c;一个代码段所在的区域 他是静态的&#xff08;相对于上下文对象&#xff09;&#xff0c;在编写代码时就确定了分类 全局作用域 函数作用域 没有块作用域&#xff08;ES6有了&#xff09; 例&#xff1a; if(true) {var c 3}console…

js-对象创建模式

Object构造函数模式 套路:先创建空的Object对象,再动态添加属性方法 适用场景:起始时不确定对象内部数据 问题:语句太多例: var p1 = new Object()p1.name = Tomp1.age = 12p1.setName = function (name) {this.name = name}console.log(p1.name,p1.age) //Tom 12p1.setN…

数据结构与算法 排序(一)

简单排序 记录一些简单的排序算法 基于比较的排序 选择排序 稳定算法 算法思想 给定一个数组&#xff0c;遍历数组 选出第一小的数&#xff0c;放在第0位&#xff1b; 选出第二小的数&#xff0c;放在第1位&#xff1b; 选出第三小的数&#xff0c;放在第2位&#xff1b; ~ 周…

Mysql索引底层(一)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…

Explain工具和索引优化(二)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…

MySQL索引优化(四)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…

SQL在MySQL中执行流程(三)

数据库笔记 Mysql索引底层&#xff08;一&#xff09;Explain工具和索引优化&#xff08;二&#xff09;SQL在MySQL中执行流程&#xff08;三&#xff09;MySQL索引优化&#xff08;四&#xff09;MySQL事务与锁 &#xff08;五&#xff09;MVCC和BufferPool&#xff08;六&am…