描述
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. 网络协议学习笔记(五)套接字Socket

    概述 前面学习网络知识的时候写过一篇关于套接字的随笔见<JAVA SOCKET 详解>,现在本人正在系统的学习网络知识,现在除了温故知新之外,在详细的学习记录一下套接字的知识. Socke ...

  2. netty系列之:一口多用,使用同一端口运行不同协议

    目录 简介 SocksPortUnificationServerHandler 自定义PortUnificationServerHandler 总结 简介 在之前的文章中,我们介绍了在同一个netty ...

  3. RT-Thread移植入门学习

    一.简介 RT-Thread 是一款主要由中国开源社区主导开发的开源实时操作系统(许可证GPLv2).实时线程操作系统不仅仅是一个单一的实时操作系统内核,它也是一个完整的应用系统,包含了实时.嵌入式系 ...

  4. 【自写信息搜集工具】ThunderSearch开发原理解析

    前段时间结合zoomeye的开发文档做了个简易的信息搜集工具ThunderSearch[项目地址 / 博客地址],这次来讲讲具体的实现原理和开发思路 首先要能看懂开发文档,https://www.zo ...

  5. gin框架中设置信任代理IP并获取远程客户端IP

    package main import ( "fmt" "github.com/gin-gonic/gin" ) func main() { gin.SetMo ...

  6. gin中绑定表单数据至自定义结构体

    package main import "github.com/gin-gonic/gin" type StructA struct { FieldA string `form:& ...

  7. linux 启动过程原理哦

    bios加电自检硬件设备 grub引导加载程序 当内核被加载到内存,内核阶段就开始了. init进程是所有进程的发起者和控制者.因为在任何基于unix的系统中,它都是第一个运行的进程. 然后执行sys ...

  8. AtCoder Beginner Contest 146_E - Rem of Sum is Num

    预处理即可 我们要找的是 (f[i] - f[j]) % k == i - j 移项可得 f[i] - i = f[j] - j 在 i - j <= k 的条件下 因此题目变成了,对于每个右端 ...

  9. git 初始化本地项目并推送到远程

    有一个新项目,开发了一些代码之后想推送到远程,具体的操作方式和命令如下: (使用 git bash) 1.切到项目目录中,例如 E:\git\smart-open 2.初始化git仓库并在本地提交 / ...

  10. Python调用windows下DLL详解 - ctypes库的使用

    在python中某些时候需要C做效率上的补充,在实际应用中,需要做部分数据的交互.使用python中的ctypes模块可以很方便的调用windows的dll(也包括linux下的so等文件),下面将详 ...