描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。

首先这个是他的枚举

针对父元素定位

简单的说   父元素加入 relative

     子元素加入 absolute

使用 left", "top", "right" 以及 "bottom 设置大小就行了

提示:子元素加入absolute后 会从最近的父元素开始找起  找到了第一个就会停止寻找,

最近的父元素代表着 向上一个层级

针对浏览器定位

该元素加入fixed

使用 left", "top", "right" 以及 "bottom 设置大小就行了

web开发 小方法3-position的更多相关文章

  1. web开发 小方法1-禁止横向滚动

    最近学了学做了个公司的网站  总结了一些小方法 比如取消横向滚动条并禁止的横向滚动 这样就可以吧超出的切掉让网页更和谐 在body 标签 body{ text-align: center; overf ...

  2. web开发 小方法2-字体设置

    font-size 字体大小 直接给  (任意px) 就可以 font-family:"微软雅黑";   这个里面可以给多个用空格区分 按照先后优先级使用 当没有第一个字体的时候会 ...

  3. 移动Web开发小技巧

    移动Web开发小技巧 添加到主屏后的标题(IOS) name="apple-mobile-web-app-title" content="标题"> 启用  ...

  4. Web开发小妙招:巧用ThreadLocal规避层层传值

    摘要:我们可以在处理每次请求的过程中,无需从Controller以及Service中的方法层层传值,只需要直接通过该局部变量取值即可. 本文分享自华为云社区<拦截器中巧用ThreadLocal规 ...

  5. Web开发小贴士 -- 全面了解Cookie

    一.Cookie的出现 浏览器和服务器之间的通信少不了HTTP协议,但是因为HTTP协议是无状态的,所以服务器并不知道上一次浏览器做了什么样的操作,这样严重阻碍了交互式Web应用程序的实现. 针对上述 ...

  6. web开发小知识

    session共享机制:f5刷新是再次提交之前的数据请求 地址栏回车属于不同的请求 不同浏览器获取不到之前数据 同一浏览器可以获取同步数据 session注销:session.invalidate() ...

  7. java web开发小细节

    <!--1. 在form表单中的action里用绝对路径而不是相对路径--> <form action="${basePath}loginForm" name=& ...

  8. Web开发常规调试方法与常见问题分析

    一.Web项目基本原理 现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务 ...

  9. Web开发HTTP协议知识_常用http方法、http状态码等(前端开发和面试必备))

    http请求由三部分组成,分别是:请求行.消息报头.请求正文. HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连 ...

随机推荐

  1. 【分布式技术专题】「Zookeeper中间件」给大家学习一下Zookeeper的”开发伴侣”—Curator-Framework(基础篇)

    CuratorFramework基本介绍 CuratorFramework是Netflix公司开源的一套Zookeeper客户端框架,它作为一款优秀的ZooKeeper客户端开源工具,主要提供了对客户 ...

  2. 【Java】静态与非静态

    文章目录 静态与非静态 static关键字 使用static修饰属性:静态变量(或类变量) 类变量与实例变量的内存解析 使用static修饰方法:静态方法 使用static的注意点 开发中,如何确定一 ...

  3. NPOI处理Excel

    using NPOI; using NPOI.XSSF.UserModel; using NPOI.SS.UserModel; using NPOI.HSSF.UserModel; NPOI.SS.U ...

  4. C# 类的继承问题 正方形周长面积计算问题

    1. 设计编写一个控制台应用程序,练习类的继承. (1) 编写一个抽象类 People,具有"姓名","年龄"字段,"姓名"属性,Work ...

  5. 带你十天轻松搞定 Go 微服务系列(二)

    上篇文章开始,我们通过一个系列文章跟大家详细展示一个 go-zero 微服务示例,整个系列分十篇文章,目录结构如下: 环境搭建 服务拆分(本文) 用户服务 产品服务 订单服务 支付服务 RPC 服务 ...

  6. pytest文档4-fixture之conftest.py

    用例1需要先登录,用例2不需要登录,用例3需要先登录.很显然这就无法用setup和teardown来实现了.fixture之conftest.py就是自定义测试用例的预置条件 1.firture相对于 ...

  7. MacBook USB 连 iPhone 响个不停,充电频繁的连上/断开

    电脑是 MacBook Pro (Retina, 15-inch, Mid 2015) 连 iPhone 响个不停,充电频繁的连上 /断开,数据线是原装的,想连接爱思助手连接不上. 网上方法 1 开启 ...

  8. linux中shell编程 -->三剑客习题汇总

    目录 1.找出/proc/meminfo文件中以s开头的行,至少用三种方式忽略大小写 2.显示当前系统上的以root,centos或者user开头的信息 3.找出/etc/init.d/functio ...

  9. alpakka-kafka(9)-kafka在分布式运算中的应用

    kafka具备的分布式.高吞吐.高可用特性,以及所提供的各种消息消费模式可以保证在一个多节点集群环境里消息被消费的安全性:即防止每条消息遗漏处理或重复消费.特别是exactly-once消费策略:可以 ...

  10. CTF入门学习5-> 前端JavaScript基础

    Web安全基础 JavaScript的实现包括以下3个部分: 1)核心语法:描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方法和接口 3)浏览器对象模型(BOM):与浏览器 ...