CSS 定位

最新推荐文章于 2024-07-16 15:22:30 发布
最新推荐文章于 2024-07-16 15:22:30 发布
阅读量343 收藏
点赞数
分类专栏： Web 文章标签： css 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/soindy/article/details/65440924
版权

相对定位

相对定位就是相对于自己以前在标准流的位置来移动,不脱离标准流.需要配合top left right bottom 使用.会在标准流中占用空间.

注意点

  1. 同一个方向只能有一个属性
  2. 由于不脱离标准流,所以区分行内元素,块级元素,行内块级元素
  3. 由于不脱离标准流,所以相对定位的元素会占用标准流的位置,所以设置其margin/padding属性的时候会影响标准流的布局(给定位之前的盒子)

使用场景

  1. 微调: 设置顶端对齐
  2. 配合绝对定位使用

绝对定位

脱离标准流(不占位)

  1. 不区分行内元素/块级元素/行内块级元素
  2. 要配合top left right bottom 使用
  3. 当元素使用绝对定位后,元素会多出两个属性: 偏移量属性和z-index

参考点

  1. 该元素已经脱离了标准文档流（不占位）,（不会占位置，宽度及长度显示随内容增减而增减)
  2. 建立的定位基准不是该元素的原来位置，而是分两种情况
    • 没有设置偏移量：无论是否存在已定位的祖先元素，都保持在元素初始位置，脱离文档流，宽度塌陷（随内容变化而变化）
    • 设置了偏移量：又分两种情况（A.无已定位的祖先元素 B.有已定位的祖先元素）
      1.无已定位的祖先元素:它会以根节点<html>为偏移参照基准
      2.有已定位的祖先元素:它会以距其最近的已定位(定位只包括绝对定位,相对定位和固定定位,静态定位不可以!)祖先元素为偏移参照基准
  3. 如果以body作为参考点是以首屏作为参考点,如果网页足够大,会随着网页的滚动而滚动
  4. 绝对定位的元素会忽略父元素的padding
  5. 一般使用父元素相对定位,子元素绝对定位实现某些效果

水平居中

注意margin: 0 auto;在绝对定位中不起作用
可以设置

left: 50%;
margin-left: -(元素宽度的一般)

固定定位

脱离标准流
1. 不区分行内元素/块级元素/行内块级元素
2. 不随滚动条滚动
3. IE6不支持固定定位

静态定位

元素默认就是静态定位

z-index

  1. 默认所有元素的z-index都是0
  2. 默认情况下定位流会覆盖标准流的东西
  3. 默认情况下定位流的元素后面编写的会盖住前面编写的
  4. 设置了z-index的话,大的在上面
    • 如果两个元素的父元素都没有设置z-index,那么子元素谁的z-index大谁在上面
    • 如果父元素设置了z-index,那么子元素的z-index就会失效.谁的父元素z-index大谁在上面
  5. 按按
大大大大大桃子
关注
专栏目录
前端css定位.pdf
07-28
总的来说，CSS定位技术为前端布局提供了强大的控制能力，可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式（标准流、浮动、定位）中的应用，对于前端开发者来说至关重要。在网页布局中，定位通常是在...
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
给马小怂写的教程-----微信如何添加表情包
soindy
12-24 1069
CSS定位属性-6.2相对定位-position: relative；--注意几个加粗标黑的地方-相对定位并不会让元素脱离标准流-通常和位置属性top、left、bottom、right一起使用
qq_44280574的博客
09-01 923
【两步走 定位的模式，重难点 和位置 】 1.什么是相对定位 相对定位是指元素相对于标准文档流中其的默认位置，来进行定位的 当position属性值设置为relative时，开启相对定位模式 **相对定位并不会让元素脱离标准流 ** 因此 相对定位也不会影响到周围其它元素的排布 实际使用时，相对定位一般都是和位置属性一起使用。因为单独使用，你也看不到啥效果啊【如果不和位置属性一起使用，只是单纯设置position: relative; 而已，那它还是会在原来的那个坑里，不会有什么变化】 例如： .box {
HTML 界面之间共享数据
soindy
06-14 6925
HTML 界面之间共享数据: // 存储key var loginDataStoreKey = 'App.loginDataStoreKey'; // 存储 window.sessionStorage.setItem(loginDataStoreKey, jsonData); // 读取 var tempData = window.sessionS
CSS 设置a标签的下划线颜色(a tag underline)
热门推荐
soindy
12-29 2万+
设置a标签的下划线只能通过border-bottom进行设置.a{ text-decoration: none; border-bottom: 1px solid red; }
CSS定位
Ma_jiao的博客
07-14 1万+
定位 是布局中的重要属性，一般用于盖压效果与位置相关效果。 position 给元素设置整体定位，必须同时存在position属性和偏移量属性。 属性值 说明 relative 相对定位 absolute 绝对定位 fixed 固定定位 偏移量属性 定位的元素，在水平或垂直方向需要偏移的距离。 水平：left、right 垂直：top、bottom relstive(相对定位) 参考这个元素原始应该加载的位置。 相对定位没有脱离原始状态（标准流，浮动），它不会让出原来占有的位
css定位
weixin_43368552的博客
06-06 1191
定位作用： 1.可以让元素自由的摆放在网页的任何位置 2.一般用于 盒子之间的层叠情况 例如： position 使用定位的步骤1.设置定位方式 属性名：position 常见属性值： 静态定位：static 相对定位：relative 绝对定位：absolute 固定定位：fixed2.设置偏移值 偏移值设置分为两个方向，水平和垂直方向各选一个来设置即可 选区的原则一般就近原则（离哪边近就用哪一个） 补充说明： css书写顺序： 1.定位/浮动/display; 2.盒子模型 3.文字属性静态定位pos
CSS定位详解
最新发布
OYJP666的博客
07-16 1754
详细讲解CSS里面的定位，以及定位使用的一些小技巧
css定位属性
weixin_48180273的博客
01-28 4922
CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 一、position 属性的作用 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 static relative fixed absolute 1.相对定位：relative 相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调），它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。而且不脱出文档流，还占据着位置。 d
CSS定位与浮动
m0_49034593的博客
08-18 2233
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务
html+css定位练习
08-05
总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
深入理解CSS定位与层叠
12-13
position：static(静态定位) 当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题。所以当没有定义position属性时，并不说明该元素没有...
selenium之css定位详解
王大傻的博客
02-22 8267
css定位 css概述： 1、css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。 2、css语言中有css选择器，在selenium中也可以使用这种选择器来进行元素定位。 3、css定位方式比xpath快，而且css的语法也非常强大，所以非常推荐这种方式定位。 css定位策略（方式）： 1、id选择器 2、class选择器 3、元素选择器 4、属性选择器 5、层级选择器 css定位方法：find_element_by_css_selector() 1
AngularJS 设置img (ng-src 和 src 区别)
soindy
05-11 2万+
AngularJS 使用 ng-src 替换了src :<img ng-src="{{imageUrl}}">错误写法:<img src="http://www.coderlady.com/avatar/{{hash}}"/>正确写法<img ng-src="http://www.coderlady.com/avatar/{{hash}}"/>这是因为在加载页面的时候, 在Angular加载完成之
echart报错: echarts.js:5073 Uncaught Error: Component series. not exists. Load it first
soindy
12-07 2万+
设置series的时候确保name,data,type这3个必须的属性设置上了.series: [{ name:'得到', type:'line', data:[100.,311.3,322.8,] }],
sha256.js:3 Uncaught ReferenceError: CryptoJS is not defined(…)
soindy
11-04 2万+
使用crypto-js加密时报错: sha256.js:3 Uncaught ReferenceError: CryptoJS is not defined(…)(anonymous function) @ sha256.js:3(anonymous function) @ sha256.js:179 aes.js:3 Uncaught ReferenceError: CryptoJS is n
CSS定位详解：绝对、相对与浮动的规则
CSS定位是网页布局设计中的关键概念，主要包括三种类型：相对定位、绝对定位和浮动。下面将详细阐述这些定位方式及其规则。 1. 相对定位（Relative Positioning） 相对定位允许元素保持在其原始位置的基础上进行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值