文章目录

前言
- HTML中为什么需要定位？
一、定位
- 1.定位的组成
- 2.定位模式
- - 1、static 静态定位 (默认)
  - 2、relative 相对定位
  - 3、absolute 绝对定位
  - 4、fixed 固定定位
  - 5、粘性定位sticky （了解）
- 3.边偏移
- 4.定位的叠放顺序
二、定位的扩展
- 1、绝对定位盒子的居中算法
- 2、定位的特殊性

前言

HTML中为什么需要定位？

1、浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子

2、定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

一、定位

1.定位的组成

定位=定位模式+边偏移

定位模式：定位模式用于指定一个元素在文档中的定位方式。

边偏移：边偏移则决定了该元素的最终位置。

代码如下（示例）：

2.定位模式

1、static 静态定位 (默认)

书写规范：

选择器 { position：static；}

2、relative 相对定位

书写规范：

选择器 {position ：relative；}

3、absolute 绝对定位

书写规范：

选择器 {position：absolute；}

4、fixed 固定定位

书写规范：

选择器 {position：fixed；}

5、粘性定位sticky （了解）

书写规范：

选择器 {position：sticky；}

3.边偏移

有四个值：

top 顶端偏移量，定义元素相对于其父元素上边线的距离

bottom 底部偏移量，定义元素相对于其父元素下边线的距离

left 左侧偏移量，定义元素相对于其父元素左边线的距离

right 右侧偏移量，定义元素相对于其父元素右边线的距离

4.定位的叠放顺序

书写规范：

选择器 { z-index : 1;}

数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越考上
如果相同属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

二、定位的扩展

1、绝对定位盒子的居中算法

加了绝对定位i的盒子不能通过 margin：0 auto；水平居中，但是可以通过以下计算方法实现水平和垂直居中。
（1）left：50%；：让盒子的左侧移动到父级元素的水平中心位置。
（2）margin-left : -100px; : 让盒子向左移动自身宽度的一半。

2、定位的特殊性

绝对定位和固定定位也和浮动类似。
（1）行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
（2）块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

定位的概念（HTML）相关推荐

zigbee定位的概念
这篇笔记主要是基于CC2431 Location Engine 这篇文档.这篇文档主要提供一些定位的基本概念,同时给出了一种在开发定位系统过程中的小技巧. (支持原创,如需转载,请注明地址:ht ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
职业生涯中的八大“定位法则”（转）
1972年, 美国当代营销大师阿尔·里斯与杰克·特劳特在美国<广告时代>杂志上撰写的文章<定位新纪元>,首次提到了"定位"这个概念.而在今天,"定 ...
10分钟读懂什么是产品定位
解释下定位这个概念,<韦氏词典>里对定位的解释是:针对敌人(竞争对手)确立最具优势的位置.这个定义其实和战略非常相近. 这个概念也是近十几年才被提出的,有人认为定位的出现是促进人类生产力再 ...
科研笔记(一) 室内定位技术讲解
Hello,everyone! 我是鲁班·,一个热衷于科研和软开的胖子! 目录发展背景技术分类国内外主要实验室.学者和赛事 10年来有价值的参考文献发展背景迄今为止,室内定位技术已经发展了二 ...
重定位——重定位的简介与操作（涉及位置无关码）
以下内容源于朱有鹏嵌入式课程的学习与整理,如有侵权请告知删除. 参考博客:位置无关码.位置有关码 - biaohc - 博客园一.链接地址与运行地址 1.链接地址链接地址,是指程序员通过Makef ...
自学前端第十八天:CSS精准定位position
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 "浮起来" 字上面, 那么我们的position定位关键在于一个 & ...
聊聊定位-如何占领用户心智
这是鼎叔的第五十三篇原创文章.行业大牛和刚毕业的小白,都可以进来聊聊. 欢迎关注本公众号<敏捷测试转型>,大量原创思考文章陆续推出. 加入到互联网行业后,和业务/产品的管理者讨论问题时,屡 ...
虾皮市场中店铺定位是什么，如何做好产品线布局？这些东西你有了解吗?
当下,东南亚无疑是跨境电商人的新兴热门平台,众多卖家争先布局.其中,以虾皮为例,年均整体增速都超过100%的增长.卖家要想找准自身店铺的定位.做好产品线的布局,在新兴蓝海市场中大获全胜,了解虾皮中店铺 ...

定位的概念（HTML）

文章目录

前言

HTML中为什么需要定位？

一、定位

1.定位的组成

2.定位模式

1、static 静态定位 (默认)

2、relative 相对定位

3、absolute 绝对定位

4、fixed 固定定位

5、粘性定位sticky （了解）

3.边偏移

4.定位的叠放顺序

二、定位的扩展

1、绝对定位盒子的居中算法

2、定位的特殊性

定位的概念（HTML）相关推荐

最新文章

热门文章