美文网首页
08 ­ 第八章:定位

08 ­ 第八章:定位

作者: 晚溪呀 | 来源:发表于2018-10-23 22:53 被阅读0次

相对定位

CSS position属性用于指定一个元素在文档中的定位方式。 toprightbottomleft
性则决定了该元素的最终位置。
相对定位

.box1{
      position:relative;/*relative = 相对的意思*/
      left:50px;
      }
      <ul class='wrap'>
        <li class='box1'>
        <li class='box2'>
      </ul>

定义:
相对于元素没有定位之前的位置进行位移!

注意:relative给百分比的问题,父级没有高度的时候,百分比不起作用!

特性

1.不使元素脱离文档流 文档流:正常元素的流体布局,从上至下 这里有两种说法,一种占文档流
自身的位置还在 一种不占文档流确实层级比较高 可以理解成占据自己的位置 同时提高了层级
2.不影响元素本身特性,行内还是行内,块级还是块级

绝对定位

相对于已经定位的父元素进行定位
特性

1.完全脱离文档流
2.行内元素支持宽高
3.块级元素内容撑开宽高

  <li class='box'></li>
  </li>
  </li>

4.没有祖先元素则相对于body
5.一般配合相对定位使用
6.绝对定位的元素的位置相对于最近的已定位祖先元素
7.margin:auto;失效

扩展 ­ 如何使一个盒子在页面中百分之百居中呢?

  /*第一种方法*/
  position:absolute;
  top:50%;
  left:50%;
  margin:-100px 0 0 -100px;
  /*第二种方法*/
  margin:auto;
  position:absolute;
  top:0;
  eft:0;
  right:0;
  bottom:0;

固定定位 fixed

相对浏览器窗口定位!

z­index

1.z­index 可以调换两个层的上下位置关系
2.值可以为正,也可以为负,值越大,越在上面 默认值=0
3.只能同级元素对比 你在大楼里面,你自己不能和大楼比谁高!
4.z­index:只对定位的元素有效,其它元素均无效

相关文章

  • 08 ­ 第八章:定位

    相对定位 CSS position属性用于指定一个元素在文档中的定位方式。 top , right ,bottom...

  • 2018-03-22传播定位的武器

    定位屋 -- 定位从观念到体系 第八章 传播定位 二、武器 把定位植入顾客心智中的方法、手段、工具很多,比如传统...

  • 2018-03-21传播定位的方法

    定位屋 -- 定位从观念到体系 第八章 传播定位 占有心智资源,是定位的起点和终点。占有心智资源既要做实定位更要...

  • 2018-03-23定位让广告成为沟通

    定位屋 -- 定位从观念到体系 第八章 传播定位 附文:定位让广告由吹嘘变为沟通 1、传统广告位什么不起作用 就...

  • 341期福彩体彩通用双飞组合

    福彩定位6** *5* **4 体彩定位5** *2* **5 双飞俩码组合 00 03 04 05 08 12 ...

  • 为什么要重新定位竞争对手

    《定位》第八章是重新定位竞争对手。为什么要重新定位呢?我的理解,还是在于寻找空位,只不过,这一次,避实击虚,通过寻...

  • 定位08

    第21章成功六步法 第一步你拥有怎样的定位 定位需要逆向思维。定位需要从潜在顾客开始,而不是从自己开始。 不要问自...

  • 《定位》08

    十行采集: 1.定位的成功六步曲: •第一步:你拥有怎样的定位。定位需要逆向思维,需要从潜在顾客开始。 •第二步:...

  • 《孩子成长历程——三个七年成就孩子一生》读书笔记14

    第八章 思考的阶段 2 教育:关于记忆 记忆有两种:定位记忆和韵律记忆 定位记忆,例如一个孩子放在某个地方的...

  • 《定位》第八章读书笔记

    第八章 重新定位竞争对手 创建自己的定位 鉴于每个品类的产品都已经过剩,企业该如何运营广告进入消费者的心智?:最基...

网友评论

      本文标题:08 ­ 第八章:定位

      本文链接:https://www.haomeiwen.com/subject/rlpzzftx.html