boxPostion.html
<html>
<head>
 <title>Box Position</title>
<meta charset="utf-8">
<link rel="stylesheet" href="boxPosition.css">
</head>
<body>
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
</body>
</html>
 
boxPosition.css
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}
#two {
  position: relative;
  top: 20px;
  left: 10px;
  background: blue;
}
#three {
 position: absolute;
 top:100px;
 left：100px;
 background: pink;
}
#four {
 position: sticky;
 top:20px;
 left: 200px;
 background: green;
}
 
效果图

 

Positioning的更多相关文章

  1. CSS魔法堂：小结一下Box Model与Positioning Scheme

    前言  对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考.  <CSS魔法堂:重新认识Box Model.IFC.B ...

  2. W3School-CSS 定位 (Positioning) 实例

    CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 ...

  3. CSS魔法堂：Absolute Positioning就这个样

    前言 当我们以position:absolute之名让元素脱离Normal flow的控制后,以为通过left和top属性值即可让元素得以无限的自由时,却发现还有各种神秘的力量左右着它的来去,于是我们 ...

  4. Indoor Positioning System & Real time location system

    背景 惨痛的背景,正如我前面提到的,参加了公司的一个训练营.刚进来公司的新人,内心充满着对未来的美好憧憬,期待自己能闯出属于自己的天地.更何况,作为一名程序员,无比的希望所有人对自己写得代码或者App ...

  5. Positioning(定位)

    Positioning(定位)    定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么.    元素可以使用的顶部,底部,左侧和右侧属性定位 ...

  6. CSS Positioning(定位)

    Positioning(定位) CSS定位属性允许你为一个元素定位.它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么. 元素可以使用的顶部,底部,左侧和右侧属性定位.然而 ...

  7. 【代码笔记】Web-CSS-CSS Positioning

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. Task: Indoor Positioning with WiFi Signals

    Task: Indoor Positioning with WiFi SignalsYou are hired by a company to design an indoor localizatio ...

  9. CSS DISPLAY AND POSITIONING

    CSS DISPLAY AND POSITIONING Review: Layout Great job! In this lesson, you learned how to control the ...

  10. 3D indoor map positioning with a smartphone image

    menu 1. 基于Tango的三维建模技术(SLAM)(视觉SLAM,RGBD单目深度摄像机+罗盘仪)导出或不导出->Android 三维游戏开发技术(普通Android手机) 2. 基于An ...

随机推荐

  1. python 中的 and / or

    逻辑运算符:and   or    not 优先级:       not > and > or 数字:0为假, 非0为真: 字符串:空为假,非空为真: 逻辑表达式的值: x   and   ...

  2. Practical Node.js摘录（2018版）第1，2章。

    大神的node书,免费 视频:https://node.university/courses/short-lectures/lectures/3949510 另一本书:全栈JavaScript,学习b ...

  3. CF-831D Office Keys 思维题

    http://codeforces.com/contest/831/problem/D 题目大意是在一条坐标轴上,给出n个人,k把钥匙(k>=n)以及终点的坐标,所有人都可以同时运动,但不可以公 ...

  4. ZCU板级调试Bug记录

    本帖用以记录在ZCU102板级调试间遇到的Bug. 1.PL端的AXI总线在读取DDR中的数据的时候,在一个burst内不能跨越page boundary.跨越page boundary会在该burs ...

  5. Leetcode 117

    if(root == NULL) return; queue<TreeLinkNode *> que; que.push(root); while(!empty(que)){ int le ...

  6. PHP手册-函数参考-日期与时间相关扩展

    一.Calander.日期/时间.HRTime扩展的对比   Calendar 日期/时间 HRTime 简介 历法扩展集包括了一系列用于在不同历法间进行转换的函数,它是以Julian Day计数为中 ...

  7. Oracle EBS SLA 详解（转）

    原文地址: Oracle EBS SLA 详解

  8. button disable and enable

    1. disable <button id="buttonId" disabled>......</button> $("#buttonId&qu ...

  9. SpringMVC+HibernateValidator，配置在properties文件中的错误信息回显前端页面出现中文乱码

    问题: 后台在springMVC中使用hibernate-validator做参数校验的时候(validator具体使用方法见GOOGLE),用properties文件配置了校验失败的错误信息.发现回 ...

  10. PHP指针相关函数

    1.each each — 返回数组中当前的键/值对并将数组指针向前移动一步 $arr = array("one", "two", "three&qu ...