通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。

position 属性值的含义:

static
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置,所以相对定位移动过大会覆盖掉其他框。
absolute
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。因此也会覆盖其他块(若位置重叠);
fixed
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
当然块定位也可以用float属性布局

CSS中定位问题的更多相关文章

  1. css中的定位问题

    由于我最近在修改自己的网页布局,突然发现了自己对css中的定位概念还是混淆的,于是通过查官方文档,大神博客,自己实践,重新梳理了css定位的知识点.如果有不对的地方,请指正

  2. CSS 中定位的使用

    position relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点 仍然会暂居原来的位置) a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元 ...

  3. css中的绝对定位和相对定位(详解,总结)

    css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...

  4. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  5. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  6. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  7. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  8. CSS中一些常见的兼容性问题

    CSS中一些兼容性问题就是浏览器兼容,而这些浏览器兼容问题主要是Ie和FF之间的争斗. CSS hack中的一些事: 我们为了让页面形成统一的效果,要针对不同的浏览器或不同版本写出对应可解析的CSS样 ...

  9. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

随机推荐

  1. 【贪心+排序】凌乱的yyy / 线段覆盖 luogu-1803

    题目描述 现在各大oj上有n个比赛,每个比赛的开始.结束的时间点是知道的. yyy认为,参加越多的比赛,noip就能考的越好(假的) 所以,他想知道他最多能参加几个比赛. 由于yyy是蒟蒻,如果要参加 ...

  2. 开发工具IDE从入门到爱不释手(二)开发中必会技能

    一.高效的代码编辑技能 1.复制和复制历史 Ctrl+C:复制,点中你要复制的行,,完成复制 Ctrl+Shift+V:复制历史, 查看最近复制的五条历史记录 Ctrl+D:直接复制出光标所在行 Al ...

  3. 微信小程序 -- scroll view

    效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平 ...

  4. 第二十一篇 -- QTimer实现秒表功能

    效果图: 程序一开始就开始计时,当完成了相关功能(在线程中完成)之后,就触发停止信号,停止定时器. time.py #!/usr/bin/env python # _*_ coding: UTF-8 ...

  5. Python - 基础数据类型 set 集合

    集合的简介 集合是一个无序.不重复的序列 它的基本用法包括成员检测和消除重复元素 集合对象也支持像 联合,交集,差集,对称差分等数学运算 集合中所有的元素放在 {} 中间,并用逗号分开 集合的栗子 这 ...

  6. ondblclick="return showCodeList 分析思路

    <Div id="divApproveRejectReasonInput" style="display:none"><input class ...

  7. 破解网站码验证,Java实现,不调用任何平台api接口

    package image.images; import java.io.File; import java.io.IOException; import java.io.InputStream; i ...

  8. OpenFaaS实战之六:of-watchdog(为性能而生)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. SQL排序包含数字、字母和中文处理

    --模拟数据 SELECT * INTO #temp FROM ( SELECT 1 AS id, 'C101' AS sort UNION ALL SELECT 2 AS id, 'B101' AS ...

  10. 冒泡排序、选择排序、直接插入排序、快速排序、折半查找>从零开始学JAVA系列

    目录 冒泡排序.选择排序.直接插入排序 冒泡排序 选择排序 选择排序与冒泡排序的注意事项 小案例,使用选择排序完成对对象的排序 直接插入排序(插入排序) 快速排序(比较排序中效率最高的一种排序) 折半 ...