小白文，我对四种定位的理解（固定定位、相对定位、绝对定位、静态定位）

最新推荐文章于 2024-08-09 10:42:44 发布

.你我山巅自相逢.

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量200

点赞数

文章标签：前端 css Powered by 金山文档

本文链接：https://blog.csdn.net/G88888888p/article/details/129196626

版权

本文介绍了CSS中的四种定位方式：fixed定位使元素相对于页面固定，relative定位相对于自身位置，absolute定位相对于最近的定位祖先元素，而static则是默认定位。在布局设计中，开发者可以根据需求选择合适的定位方式，并使用left、top、right、bottom进行微调。

摘要由CSDN通过智能技术生成

固定定位 position:fixed

讲解：相对于页面进行定位，经常用于回到顶部操作

相对定位 position: relative

讲解：相对于自己本身的位置进行定位

绝对定位 position:absolute

讲解：相对于离自己最近的一层的任何设置定位的元素进行定位的，实在没有就对浏览器进行定位

静态定位 position:static

讲解：啥效果没有，但是可以配合绝对定位来用

注意：除了静态定位，剩下的三种都有left、top、right、bottom，首先大家可以根据需求选择合适的定位，然后通过这四个属性进行调试

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

.你我山巅自相逢.

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小白文，我对四种定位的理解（固定定位、相对定位、绝对定位、静态定位）

本文是对css样式四种定位的讲解，基础、通俗易懂、都是大白话，一看就明白
复制链接

扫一扫

定位（静态定位、绝对定位、相对定位、固定定位）

qq_45929209的博客

12-01

1793

定位静态定位绝对定位相对定位固定定位 静态定位缺省时，即为静态定位静态定位是指各个元素在html文档流中应有的位置，根据HTML超文本传输协议，浏览器在接受和解析网页时，是遵循从上往下来显示的静态定位时，无法通过left、right、top、bottom来设定元素的位置 绝对定位 代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>&lt

静态+绝对+相对+固定定位

weixin_45630345的博客

06-02

181

一.概念定位：position：static/absolute/relative/fixed 1.static 静态定位（文档流布局）默认 2.absolute:绝对定位 3.relative：相对定位（不脱离文档流） 4.fixed：固定定位 二.看谁定位 绝对定位：定位元素由left，right，top，bottom设置位置。绝对定位元素在没有相对父级定位参照时，统一相对于浏览器窗口左上角定位； 相对定位：相对于自身标签定位，让其绝对定位子元素相对于该标签定位； 固定定位：永远相对于浏览器窗口定位三

参与评论您还未登录，请先登录后发表或查看评论

css静态定位详解,CSS中的定位方式，相对、绝对、固定、静态，瞬间搞懂

weixin_35385462的博客

08-04

693

码农公社 210.net.cn210是何含义？10月24日是程序员节，1024 =210、210既210之意。定位??position一、基本概念1、CSS定位属性允许您定位元素。它还可以将元素放置在另一个元素之后，并指定当元素的内容太大时应该怎么做。2、可以使用top，bottom，left，right属性定位元素。但是，首先要设置position属性，否则这些属性将不起作用。二、静态定位...

静态、相对、绝对以及固定定位的用法、特点以及作用

qq_52908359的博客

04-24

539

1. 四种定位的特性：定位参考物特点 static 默认默认 相对定位relative 定位前的位置 1.不影响元素本身特性 2.元素不脱离文档流 3.相对于原位置进行偏移 绝对定位 absolute 最近的使用了定位的父级，如果没有找body 1.元素脱离文档流 2.行元素支持所有css样式 3.块元素内容撑开高度 4.清楚子级浮动固定

css定位大汇总

warriordwu的博客

07-02

311

1.定位介绍 1.1为什么使用定位利用定位，可以精准地将元素摆放到任何位置。摆放的位置可以相对于其父元素、另一个元素或者是浏览器本身的位置。 1.2定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子定位也是用来布局的，它有两部分组成：定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。 1.2.1边偏移边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性

PCANet下的遮挡定位人脸识别算法.pdf

09-23

本文提出了一种基于PCANet的遮挡定位人脸识别算法，该算法结合深度学习和特征点遮挡检测，能够有效地解决人脸识别中的遮挡问题。下面是该算法的详细介绍： 1. 遮挡定位人脸识别算法的提出背景人脸识别是计算机...

理解Android硬件加速原理(小白文)

01-20

在Android系统中，硬件加速是一种优化技术，它利用GPU（图形处理器）来处理图形绘制，以提高应用性能和用户体验。与传统的软件绘制相比，硬件加速不仅提升了绘制速度，还在构建绘制区域和渲染流程上进行了优化。 1....

java XML的使用方式小白文.md

11-18

3. **自我描述性**：通过其内部结构，XML文件能够自我解释，即数据本身包含了关于如何理解这些数据的信息。 XML的主要应用领域包括： 1. **网络数据传输**：由于其结构清晰，易于解析，常被用作不同系统间的数据...

PhotoShop阳文和阴文朱文和白文两种篆刻艺术印章制作教程.doc

10-08

印章分为阳文和阴文，也就是朱文和白文。阳文是指印章上的文字或图案凸出于表面，颜色通常为红色（模拟印泥），背景为白色；而阴文则相反，文字或图案凹陷，背景呈现红色，文字为白色。本教程将教你如何用Photoshop...

CSS: 相对定位、绝对定位、固定定位 的基础知识及使用

无面人的博客

03-30

4650

CSS中相对定位、绝对定位、固定定位 的基础知识及使用

CSS中绝对定位和相对定位的区别及作用

热门推荐

zxh996的博客

06-30

1万+

CSS中绝对定位和相对定位的区别及作用针对定位的区别及使用我整理一些方法一、绝对定位二、相对定位三、绝对定位与相对定位的区别四、绝对定位与相对定位的使用结语针对定位的区别及使用我整理一些方法 css的学习中，开篇就是相对定位和绝对定位的使用，大家在学习的过程中不免被其绕晕，所以我按照自己的理解对其进行了整理及分析，仅供参考学习。未进行定位，用以下面俩种定位的区别一、绝对定位 可以将绝对定位理解为以浏览器为父节点来定位自己代码如下（示例）： <style>

什么是绝对、相对定位

qq_37391214的博客

03-29

1148

绝对定位 position：absolute 设置为绝对定位的元素框将会从文档流中完全删除，并相对于其包含块（父元素）定位，包含块可能是文档中的另一个元素或者是初始包含块（body）元素。 绝对定位会脱离文档流，并且不占空间，普通文档流的元素的布局会认为绝对定位的元素不存在，所以绝对定位的元素可以覆盖在其他元素上，可以通过 z-index 来控制这些层的相应顺序。 <html> &l...

css4种定位方式（静态定位，相对定位，绝对定位，固定定位）详解

qq_44771388的博客

12-14

4149

说到定位就要用到 position 属性我们有四种不同的属性值 1.static 静态定位:使用静态定位时，元素处于普通流中，和未添加的元素一样处在最底层。 2.relative 相对定位：是相对于该元素在普通流时的位置元素仍保持其未定位前的形状，它原本所占的空间仍保留。就拿这三个div做比喻（这里就不给css代码了） <div class="father"> <div class="son1"></div> <div clas

static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位)

qq_44939011的博客

07-20

9874

static(静态定位)，fixed（固定定位），relative(相对定位)，absolute(绝对定位) Position的取值： static(静态定位) : 表示块保留在原本应该在的位置，不会重新定位。 fixed（固定定位）：元素就被固定不会随着滚动条的拖动而改变位置。 relative(相对定位) ：相对定位是通过将元素从原来的位置向上、向下、向左或者向右移动来定位的。 absolute(绝对定位)：绝对定位，是相对于最近的且不是static定位的父元素来定位。 1.static(静

【CSS笔记】CSS布局之五种定位方式（静态、相对、绝对、固定、粘性）

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

08-18

5666

设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...

CSS中的静态定位、固定定位、绝对定位和相对定位

一生为追梦的博客

11-29

1万+

相对定位：层级关系为：效果图：为改变参照物（橘色框）后的效果层级关系为：效果图：参照物为最顶级的元素情况。层级关系为：效果图：仅使用margin属性布局绝对定位元素的情况此情况，margin-bottom 和margin-righ

ASP.NET Core Web API 使用Autofac框架

鲤籽鲲的博客

08-08

593

ASP.NET Core Web API 使用Autofac框架

略记一次抓取内容后解密及登录的经历