`
抽风的鱼
  • 浏览: 50506 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

css bottom top left right

 
阅读更多

position :relative

bottom top left right  则是该元素的相对原先位置的偏移 

例:

bottom:10px;是相对原先的位置向上偏移10px;bottom:-10px;是相对原先的位置向下偏移10px;

top:10px; 是相对原来的位置偏移向下偏移10px;

left:10px; 是相对原先的位置向左偏移10px;

right:20px;是相对原先的位置向右偏移10px;

 

position :absolute

bottom top left right  则是该元素相对父亲元素的偏移

例:

bottom:10px;是该元素的下边界相对父亲元素的下边界向上偏移10px:(要想实现该效果父亲元素必须实现postion为relative或absolute,否则该元素则会相对body偏移)

top:10px;是该元素的上边界相对父亲元素的上边界向下偏移10px;(要想实现该效果父亲元素必须实现postion为relative或absolute,否则该元素则会相对body偏移)

left right 同理

 

 

分享到:
评论

相关推荐

    9段css代码

    二、个性化圆角 #container { -webkit-border-top-... -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px; }

    css2中文手册 学习css的必选

    position z-index top right bottom left 尺寸 Dimensions height max-height min-height width max-width min-width 布局 Layout clear float clip overflow overflow-x overflow-y display visibility ...

    HTML+CSS总结.doc

    "HTML+CSS总结" ... ...我们只需使用鼠标在某一文档中点取一个图标,Internet 就会马上转到与此图标相关的...定位的方法是在 CSS 中设置容器的 top、bottom、left 和 right 值,这 4 个值得参照对象是浏览器窗口或父容器。

    CSS样式风格定义

    }.top_UserLogin /* 顶部用户登录文字链接的CSS定义 */{color: #037FA8}/* ==top.asp中的CSS定义结束== *//* ==网页中部中的CSS定义开始== */.center_tdbgall /* 中部表格总背景颜色定义 */{background:#ffffff;...

    css3.0手册 doc版

     border-corner-image:border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image 取值: none: 默认值。无背景图。 <image>: 使用绝对或相对 url 地址指定背景...

    jsp页面美化经典-css翻页代码

    24款css翻页代码 BODY { FONT-SIZE: 12px;FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;WIDTH: 60%; PADDING-LEFT: 25px; } /*CSS Digg style pagination*/ DIV.digg { PADDING-RIGHT: 3px; PADDING-...

    html 版 CSS中文速查手册

    borderborder-colorborder-styleborder-widthborder-topborder-top-colorborder-top-styleborder-top-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-bottomborder-bottom-color...

    详解CSS中左上朝向三角形(Top-Left Triangle)的几种制作方式

    #triangle-topleft { border: 30px solid #e6686e; height: 0; width: 0; border-right-color: transparent; border-bottom-color: transparent; } 第二种: #triangle-topleft { width: 0; height: 0;

    纯CSS定位的固定垂直居中浮动层代码,附经典解说:《详解定位与定位应用》

    在本文流中,任何一个元素都被文本流所限制了自身的位置,但是通过CSS我们依然...而真正意义上的位移是通过top,right,bottom,left(下称TRBL,TRBL可以折分使用。)针对一个相对定位的元素所产生的。我们看下面的图...

    div+css 定位浅析

    没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级...

    提示对话框-消息提示通知插件spop.js-找优质资源尽在【蓝文资源库】bluestep.cc.zip

    toast可以显示在屏幕的6个位置:top-left, top-center, top-right, bottom-left, bottom-center, bottom-right。 可以对消息提示进行编组。 提供打开和关闭消息提示时的回调函数。 支持HTML内容。 使用方法 在页面中...

    CSS3实现渐变背景兼容问题

    它可以接受一个表示角度的值(可用的单位deg、rad、grad或turn)或者是表示方向的关键词(top、right、bottom、left、left top、top right、bottom right或者left bottom)。 color-start, color-end:分

    CSS中Position四个属性的使用介绍

    relative:相对定位,对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。 absolute:绝对定位,对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠...

    CSS盒子模型结构

    * padding:padding-Bottom、padding-left、padding-right、padding-Top * border:border-bottom、border-bottom-color、border-bottom-style、border-bottom-width 等 * margin:margin-bottom、margin-left、...

    CSSPatcher.zip

    -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius: 3px 3px 0 0; border-...

    详解css 定位与定位应用

    relative 不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。absolute 脱离文档流,通过 top,bottom,left,right 定位。选取其最近的父级定位元素,当父级 position...

    CSS3正方体的3D旋转动画特效.zip

      <div class="front"></div>  <div class="back"></div>  <div class="right">  <div class="left"> ... 这是一款纯CSS3绘制的3D立体正方形旋转动画效果,多个CSS3正方体同时旋转动画特效。

    CSS裁剪属性clip使用的实例教程

     值: rect(top,right,bottom,left) | auto | inherit  初始值: auto  应用于: 绝对定位或固定定位元素  继承性: 无  [注意]默认值auto表示元素的内容不应剪裁 rect clip:rect(top,right,bottom,left)中的值...

Global site tag (gtag.js) - Google Analytics