关于position的四个标签

四个标签是static,relative,absolute,fixed。

static 该值是正常流,并且是默认值,因此你很少看到(如果存在的话)指定该值。

relative:框的位置能够相对于它在正常流中的位置有所偏移

absolute:使用x和y坐标,根据包含元素的左上角精确地定位框的位置

fixed:位置是根据浏览器窗口的左上角计算出来的,并且即使用户滚动窗口,也不会改变位置。

部分源代码:

  html:

  <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>

  css:

  

.box {

display:inline-block ;

height:100px;

width:100px;

background:rgba(255, 217, 0, 0.863);

color: rgba(255, 255, 255, 0.295);

}

#two {

position: relative;

top: 20px;

left: 20px;

background: rgba(255, 0, 212, 0.582);

}

原文地址:https://www.cnblogs.com/alukade/p/9862358.html

时间: 2024-08-10 08:57:18

关于position的四个标签的相关文章

php四对标签

<?php    ?>----仅使用这样格式 <script language="php">  </script> <? ?> <% %> 想要服务器解读这四种标签,需要到php.ini文件下修改配置. 把里面的short_open_tag = Off里的off改成On.保存好重新启动apache服务.

position的四个属性值(转载)

本文转载自http://www.cnblogs.com/chinafine/articles/1765967.html(这里只是为了方便本人  查找 复习 学习 进行转载) position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div i

[转载]position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

position的四个属性值: relative ,absolute ,fixed,static

position的四个属性值: relative ,absolute ,fixed,static  下面分别讲述这四个属性,以简单代码表示 <div id="parent">     <div id="sub1">sub1</id>     <div id="sub2">sub2</id></div> 1. relative relative属性相对比较简单,我们要搞清它是相

Position属性四个值:static、fixed、absolute和relative的区别和用法

Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 先看下各个属性值的定义: 1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声

Position属性四个值:static、fixed、absolute和relative的区别和用法(转自博友 Newbie_小白)

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 先看下各个属性值的定义: 1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,ri

(十四) 标签页和工具提示插件

一.标签 标签页也就是通常所说的选项卡功能. 1.基本实例 <ul class="nav nav-tabs"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li> <li><a href="#bootstrap" data-toggle=&quo

struts1四:常用标签

struts1支持的5种标签: HTML 标签: 用来创建能够和Struts 框架和其他相应的HTML 标签交互的HTML 输入表单 Bean 标签: 在访问JavaBeans 及其属性,以及定义一个新的bean 时使用 <%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%> Logic 标签: 管理条件产生的输出和对象集产生的循环 <%@ taglib uri=&qu

mybatis学习 十四 resultMap标签 一对一(联合查询)

1.使用 resultMap 实现关联单个对象(联合查询方式) <resultMap type="Student" id="stuMap1"> <id column="sid" property="id"/> <result column="sname" property="name"/> <result column="age&quo