css-13. 定位

最新推荐文章于 2023-12-11 10:31:10 发布
最新推荐文章于 2023-12-11 10:31:10 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43552734/article/details/114380597
版权
本文详细介绍了CSS中的定位技术，包括相对定位、绝对定位和固定定位，强调了它们如何影响元素在页面上的布局。此外，还讨论了遮盖现象和z-index的作用，解释了如何通过z-index控制元素的覆盖顺序。
摘要由CSDN通过智能技术生成

定位

脱离文档流的常用三种方式：浮动、绝对定位、固定定位

position：设置定位方式

  • relative：相对定位
  • absolute：绝对定位
  • fixed：固定定位
  • static：静态定位（默认值）

相对定位

相对定位：相对元素原有位置进行定位

设置position为relative后，会激活top、bottom、left、right四个属性。其中top和left的优先级更高

top、bottom、left、right：

  • 正值：向中心方向偏移
  • 赋值：向边缘方向偏移

特性：相对定位元素没有脱离文档流，因此其位置设定不会影响其他兄弟元素

通过相对定位设置小图标：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-34zLFeCI-1614871461021)(D5C2C9B6F50249799DAB84E63E27F914)]

  • 设置淘宝图标为span的背景图
  • 设置span的padding，否则span没有大小（span为行元素，无法设置width和height）
  • 通过相对定位调整图标的位置
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpor
最低0.47元/天 解锁文章
小虾仁she
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS基本布局----定位
ducaifeng86的博客
11-12 267
前言 CSS有三种基本的布局机制：标准流、浮动和定位。定位就是确定元素的位置，利用top/right/bottom/left这四个偏移属性，可以准确地定义元素框相对于其正常位置应该出现的位置。top的优先级要高于bottom，left的优先级要高于right 一、相对定位：relative 相对定位：相对于元素原有位置的定位。相对定位并没有脱离文档流，因此对于它的位置设定不会影响其它兄弟元素...
css-4.定位
05-11
在CSS（层叠样式表）中，定位是页面布局的关键技术之一，它允许元素在页面上精确地放置和控制。...通过实践和研究这些文件，你可以更好地掌握CSS定位技术，并在网页设计中实现更加灵活和精确的布局控制。
CSS盒子的定位
lvmengmeng
04-07 2044
转自：http://www.cnblogs.com/stephen-liu74/p/3333704.html 相对定位       使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。       使用relative，即相对定位，除了将position属性设置为rel
css定位选择兄弟元素，nth-of-type
weixin_30493401的博客
02-01 1624
<spanclass="input-group-btn"the-id="num-change"> <buttonclass="btn btn-white"type="button">1000</button> <buttonclass="btn btn-white"type="button">5000</butt...
css 获取前后同级兄弟元素的方法
最新发布
jiangjunyuan168的博客
12-11 6283
获取后面的兄弟元素相较于获取前面的兄弟元素来说更简单点，这是浏览器 流布局 所决定的（元素...
selenium中，用xpath定位当前元素的相邻元素/兄弟元素
qq_35861801的博客
08-20 4379
【背景】 在定位页面元素时，有时候需要根据某个元素特征，去定位其相邻元素/兄弟元素，或者定位其父元素的兄弟元素（或叔伯元素的子元素）。这里引入xpath的两个定位方法： preceding-sibling following-sibling 【示例】 如图，页面元素A，B，C，假设我不知道B和C的name，只知道A的name，我想根据A的name去其上一个元素的name和下一个元素的name， <div class="ztag201008041230345 clearfix mbox"> &lt
如何相对于兄弟元素实现垂直居中
丁哒哒的博客
05-11 769
之前遇到的垂直居中大部分都是相对于父元素居中，方法也很多，如flex、margin、absolute等等，之前也总结过了，这里就不多赘述，但是这次的需求是相对于兄弟元素实现垂直居中，还是花费了一些时间才解决的（也可能是由于思维定势，一时半会没想起来） 一、需求效果 可以看到右侧的按钮，是相对于左侧的文字内容垂直居中的，而且内容的行数可能是一行或者两行 二、方法尝试（使用flex） 在父元素上加上： display: flex; align-items: center;.
CSS-demo.rar_DEMO_css
09-14
CSS提供了多种定位机制，如静态定位（默认），相对定位（相对于自身原始位置），绝对定位（相对于最近的非静态定位祖先元素），和固定定位（相对于浏览器窗口）。 6. **浮动**： `float`属性常用于创建多列布局。...
construct_css-源码.rar
10-10
3. 定位：position属性（static、relative、absolute、fixed）用于控制元素的位置，特别是absolute和fixed可以实现绝对定位和固定定位。 4. 弹性布局（Flexbox）：用于创建灵活的、响应式的布局，通过flex容器和flex...
css-basic.rar_css csharp_site:www.pudn.com
09-14
CSS提供了多种定位方式，如静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。此外，流体布局（使用百分比宽度）、栅格布局（grid）和弹性布局（flexbox）也是现代网页设计中...
前端开源库-is-css-root.zip
10-05
4. **布局处理**：在自定义布局或定位方案中，了解元素是否是CSS根可以帮助我们更好地控制盒模型和定位规则。 使用这个库的方法可能如下： 1. 引入库：通过npm或yarn将`is-css-root`添加到项目依赖中。 2. 调用API...
前端开源库-typed-css-modules.zip
10-05
- 提高开发效率：IDE的类型提示帮助快速定位和使用正确的CSS类名。 - 更好的代码重构和维护：由于CSS和JS之间的强关联，重构变得更简单且不易出错。 6. **实践中的注意事项**： - 需要正确配置构建工具，确保...
css-2.0.rar_web前端开发
09-23
3. **定位**：CSS 2.0提供了相对定位（relative）、绝对定位（absolute）和固定定位（fixed）等方法，让元素可以在页面上精确地放置。相对定位相对于元素原本的位置进行偏移，绝对定位相对于最近的非静态定位祖先...
html-css-examples-master.zip
02-21
这个资源库涵盖了3种不同的CSS特效，可以帮助初学者快速上手，同时也为有经验的开发者提供灵感。 在HTML中，标记语言用于定义页面结构，如标题、段落、链接等。CSS（层叠样式表）则负责页面的视觉呈现，包括颜色、...
zeal离线文档---CSS.tgz
01-04
**CSS（层叠样式表）**是网页设计和开发中不可或缺的一部分，用于定义网页的布局、颜色、字体、尺寸等视觉样式。Zeal是一款高效、轻量级的文档浏览器，特别适合开发者快速查找和学习各种编程语言和技术的API文档，...
解析CSS的相对定位和绝对定位
m0_73069601的博客
02-24 1459
解析CSS的相对定位和绝对定位
Xpath 元素中的文本内容定位/兄弟节点定位
ldt117354的博客
07-11 8569
定义该元素：&lt;a href="javascript:void(0);"&gt;+ 新建选项&lt;/a&gt;Xpath=//a[text()='+ 新建选项']
清除浮动的方法
蒲厷渶と戀的博客
12-27 435
浮动会使当前元素脱离普通文档流，从而对父级元素和兄弟级元素造成影响，最终影响布局。所以，清除浮动是每个前端必须掌握的知识。下面列举几种清除浮动的方法，如下： 方法1：父级定义高度（height） html代码： css代码： 效果图： 原理：父级元素手动设置高度，可以解决子元素浮动后，父级元素无法自动获取高度的问题。 优点：代码少、简单、易掌握。 缺点
CSS 元素的定位之相对定位 position: relative
热门推荐
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
这样设置并不生效，仍然会被下面这个属性替代：.ant-modal.custom-modal.ant-confirm-confirm .ant-modal-content .ant-modal-body .ant-confirm-body-wrapper .ant-confirm-btns .ant-btn
06-09
如果你的自定义样式无法覆盖默认样式，你可以使用 `!important` 规则来强制应用自定义样式。例如： ``` import { Modal, Button } from 'antd'; Modal.confirm({ className: 'custom-modal', title: window.language['playlist.tip'], content: window.language['playlist.des5'], okButtonProps: { style: { width: '100px', height: '50px', }, className: 'custom-ok-button', }, cancelButtonProps: { style: { width: '120px', height: '50px', }, className: 'custom-cancel-button', }, onOk: () => { // 确认操作 }, onCancel: () => { // 取消操作 }, }); ``` 然后在你的 CSS 文件中添加以下代码： ``` .custom-modal .custom-ok-button { width: 100px !important; height: 50px !important; } .custom-modal .custom-cancel-button { width: 120px !important; height: 50px !important; } ``` 这样就可以强制应用自定义样式了。如果你仍然无法覆盖默认样式，你可以使用更具体的 CSS 选择器来定位元素并应用自定义样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值