• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • left

    CSSleft属性定义了定位元素的左外边距边界与其包含块左边界之间的偏移,非定位元素设置此属性无效。

    示例

    /* <length> values */
    left: 3px;
    left: 2.4em;
    
    /* <percentage>s of the width of the containing block */
    left: 10%;
    
    /* keyword value */
    left: auto;
    
    /* global values */
    left: inherit;
    left: initial;
    left: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持left

    语法

    left:auto| inherit| <length>| <percentage>

      left的效果取决于元素的position属性:

      • position设置为absolutefixed时,left属性指定了定位元素左外边距边界与其包含块左边界之间的偏移。
      • position设置为relative时,left属性指定了元素的左边界离开其正常位置的偏移。
      • position设置为sticky时,如果元素在viewport里面,left属性的效果和position为relative等同;如果元素在viewport外面,left属性的效果和position为fixed等同。
      • position设置为static时,left属性无效。

      leftright同时指定时,元素的位置会被重复指定。当容器是从左到右时,left的值会被优先设定;当容器是从右到左时,right的值会被优先设定。

      取值

      • <length>可以是负的,正的或者 null<length>表示:
        • 对于绝对定位的元素,元素左外边距边界与其包含块左边界之间的偏移。
        • 对于相对定位定位的元素,元素的左边界离开其正常位置的偏移。
      • <percentage>代表元素包含块的宽度的百分比<percentage>
      • auto这个关键字表示:
        • 对于绝对定位元素,元素将忽略此属性而以right属性为准,如果此时设置width: auto,将基于内容需要的宽度设置宽度;如果right也为auto的话,元素的水平位置就是它假如作为静态(即static)元素时该在的位置。
        • 对于相对定位元素,元素相对正常位置的偏移量将基于right属性;如果right也为auto的话,元素将不会有偏移。
      • inherit这个关键字表示该值与其父元素(可能不是它的包含块)的计算值相同。对这个计算值的处理将和它原本为<length><percentage>auto一样。
      初始值auto
      适用元素positioned elements
      是否是继承属性
      Percentagesrefer to the width of the containing block
      适用媒体visual
      计算值if specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise,auto
      Animation typealength,percentageor calc();
      正规顺序the unique non-ambiguous order defined by the formal grammar

      例子

      //CSS
      
      #wrap {
        width: 700px;
        margin: 0 auto;
        background: #5c5c5c;
      }
      
      pre {
        white-space: pre;
        white-space: pre-wrap;
        white-space: pre-line;
        word-wrap: break-word;
      }
      
      #example_1 {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 20px;
        top: 20px;
        background-color: #d8f5ff;
      }
      
      #example_2 {
        width: 200px;
        height: 200px;
        position: relative;
        top: 0;
        right: 0;
        background-color: #c1ffdb;
      
      }
      #example_3 {
        width: 600px;
        height: 400px;
        position: relative;
        top: 20px;
        left: 20px;
        background-color: #ffd7c2;
      }
      
      #example_4 {
        width:200px;
        height:200px;
        position:absolute;
        bottom:10px;
        right:20px;
        background-color:#ffc7e4;
      }
      
      //HTML
      
      <div id="wrap">
        <div id="example_1">
          <pre>
            position: absolute;
            left: 20px;
            top: 20px;
          </pre>
          <p>the only containing element for this div is the main window, so it positions itself in relation to it.</p>
        </div>
      
        <div id="example_2">
          <pre>
            position: relative;
            top: 0;
            right: 0;
          </pre>
          <p>relative position in relation to its siblings.</p>
        </div>
      
        <div id="example_3">
          <pre>
            float: right;
            position: relative;
            top: 20px;
            left: 20px;
          </pre>
          <p>relative to its sibling div above, but removed from flow of content.</p>
      
          <div id="example_4">
            <pre>
              position: absolute;
              bottom: 10px;
              right: 20px;
            </pre>
            <p>absolute position inside of a parent with relative position</p>
          </div>
        </div>
      </div>

    上篇:bottom

    下篇:<position>