CSS定位笔记

最新推荐文章于 2024-06-02 15:15:42 发布
最新推荐文章于 2024-06-02 15:15:42 发布
阅读量93 收藏
点赞数 1
分类专栏： HTML/CSS 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44066678/article/details/115704354
版权

CSS定位

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

静态定位 static

在这里插入图片描述

相对定位 relative

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: pink;
        position: relative;
        top: 100px;
        left: 100px;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

绝对定位 absolute

在这里插入图片描述

父级没有定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 500px;
        height: 500px;
        background-color: skyblue;
      }
      .son {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

父级有定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 500px;
        height: 500px;
        background-color: skyblue;
        position: relative;
      }
      .son {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
  </body>
</html>

父级没定位，爷爷有定位

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .yeye {
        position: relative;
        width: 800px;
        height: 800px;
        background-color: red;
      }
      .father {
        width: 500px;
        height: 500px;
        background-color: skyblue;
      }
      .son {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="yeye">
      <div class="father">
        <div class="son"></div>
      </div>
    </div>
  </body>
</html>

子绝父相

在这里插入图片描述

固定定位 fixed

在这里插入图片描述

固定定位小技巧 固定在版心右侧位置。

在这里插入图片描述

粘性定位 sticky

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 3000px;
      }
      .nav {
        position: sticky;
        top: 0;
        width: 800px;
        height: 50px;
        background-color: pink;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <div class="nav">我是导航栏</div>
  </body>
</html>

定位总结

在这里插入图片描述

定位叠放次序 z-index

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
      }
      .xiongda {
        background-color: red;
        z-index: 1;
      }
      .xionger {
        background-color: green;
        left: 50px;
        top: 50px;
        z-index: 2;
      }
      .qiangge {
        background-color: blue;
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>
  </body>
</html>

绝对定位的盒子居中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        position: absolute;
        /* 1、让left走50% 父容器宽度的一半 */
        left: 50%;
        /* 2、margin 负值 往左走 自己盒子的一半 */
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

定位特殊特性

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        position: absolute;
        width: 200px;
        height: 150px;
        background-color: pink;
      }
      div {
        position: absolute;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <span>123</span>
    <div>abcd</div>
  </body>
</html>

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        /* 浮动的元素不会压住下面标准流的文字 */
        /* float: left; */
        /* 绝对定位(固定定位)会压住标准流的所有内容 */
        position: absolute;
        width: 150px;
        height: 150px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <p>阁下何不同风起，扶摇直上九万里</p>
  </body>
</html>
郭大胖ovo
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css定位笔记
WWW1260782205的博客
09-18 56
css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就 是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置为了使特殊形状的背景使能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。最常见于各种导航栏的滑动门。
CSS定位笔记position
超洋气大叔
04-26 116
父DIV position:relative 子DIV position:absolute;top:50px;
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1104
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
2020-1-22 css定位笔记
weixin_54746856的博客
01-22 1787
一、css 定位基础笔记 1.position： (posit 放，放置 + ion 表名词 → 放出的〔立场〕=位置) static(默认) (stat 站，立 + ic …的 → 立着不动的 → 静止的) relative (adj.相对于 n.亲戚) absolute (绝对的) fixed (fix 使固定) sticky (粘性的) z-index (量度) 2.relative
HTML CSS整理笔记
Lin16819的博客
12-12 3万+
常见字体单位： 1.em 移动端常用的字体尺寸单位，说白em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。 但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小...
Web网页开发-CSS定位-笔记
编程在手天下我有的博客
01-03 691
CSS的三种布局 四种定位模式及元素居中的两种情况 嵌套型盒子的外边距合并问题的解决方案
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS学习笔记整理
bfbshs_ddd的博客
12-16 1615
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
CSS元素定位笔记
识途老码
06-24 304
CSS定位 id选择器 定位id用# /* 例如要定位id = username, #username即可 */ #username class选择器 定位class用. /* 定位class= password,输入.pasword 即可*/ .password 元素标签选择器 定位元素标签时,直接输入元素的标签成即可 /* 例如要定位a标签时,直接输入a 即可。*/ a /* 例如要定位input标签时,直接输入input 即可。*/ input 属性选择器 /* 定位其他属性,需要输
css第二天定位笔记.md
07-14
css第二天定位笔记.md
css入门笔记
05-15
1.css的概述 1.问题 ... 2.css的语法规范 ...背景图片定位 作用：改变背景图片的位置 属性：background-position: 取值： 1.x y x: 背景图片水平偏移距离 取正向下右 取负向左 y: 背景图片...
css学习笔记
07-19
css学习笔记之div相对定位.
20190801-css相对定位.txt
08-03
css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状，它原本所占的空间仍保留。 css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在她所在的...
webdriver元素定位笔记
11-06
参考多本书籍和资料整理的元素定位总结内容，设置字体较小，可放大来看。有写内容可能布局不是很合理，但是我所遇到和看到的不同定位的方法都总结在上面了。分享给大家。
element-plus 自定义命名空间 el-config-provider namespace 不起作用，html 的class值改变了，但是样式不对
qq_34164814的博客
05-30 222
今天按照文档，对elemen plus + vite 的项目，进行qiankun嵌套，发现子应用的element和主应用的element plus样式冲突，所以决定用element plus 的自定义命名空间处理下。就是个大坑，结果就是，html变了，但是element css 的文件还是el-开头的，如果报错，math.div****之类的，那就是sass版本太低了，更新下，升级下就好了。第二步：修改 namespace的变量值，将下面的代码，添加到你的文件内部。使用方法，按照文档来。
HTML中Canvas关键知识点总结
最新发布
2301_79858914的博客
06-02 672
Canvas 提供了一套强大的 2D 绘图 API，适用于各种图形绘制、图像处理和动画制作。掌握 Canvas 的基础操作、路径绘制、变换操作、状态管理和性能优化等知识，可以帮助你创建复杂且高效的网页图形应用。通过以上详细的讲解，希望能让你对 Canvas 有更全面的理解，并能够应用这些知识点进行实际开发。
【html知识】html中常用的表单元素+css格式美化
weixin_56334307的博客
05-30 323
本作品是一个简洁明了的HTML文档，包含了多种常用的表单元素，如输入框、密码框、单选按钮、多选按钮、下拉列表、文本域、按钮、隐藏文字以及文件上传等。每个元素都配备了相应的说明和示例，方便用户快速理解和使用。
【HTML】通过焦点，获取部分上下文内容
随便写写
05-30 205
通过焦点，获取部分上下文内容
css浮动和动画笔记
08-19
- *1* *3* [CSS学习笔记 04、浮动与定位](https://blog.csdn.net/cl939974883/article/details/124601968)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值