CSS(四)——溢出及定位问题

溢出问题

1. 出现溢出的情况

<style>
    div{
          width: 200px;
          height: 200px;
          background: peachpuff;
       }
    p{
          color: red;
      }
  </style>
<div>
    淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！
  </div>
  <p>1234567890</p>

设置的width和height过小，文字又过多，造成了文字溢出

2. 解决溢出的办法：

• 设置溢出隐藏
• 设置溢出滚动

 overflow: hidden;
 <!--设置溢出隐藏-->

 overflow: scroll;
 <!--
     设置溢出滚动
     也可以用 overflow-x:scroll
     或overflow-y：scroll
 -->

定位问题

1. 定位分为绝对定位，相对定位，固定定位

• 相对定位 position：relative 相对于自己定位 不释放空间
• 绝对定位 position:absolute 相对于已经定位的最近的祖先元素进行定位，定位后会释放空间，如果祖先元素都没有定位，那么就相对于body进行定位
• 固定定位 position：fixed 相当于浏览器的窗口进行定位，定位后空间也会被释放
• 元素可以只进行定位而不需要改变元素位置的值，但是如果想改变元素位置的值，则必须要进行定位

2. 层级问题：

• 如果定位后发现有的元素背景被覆盖，那么只需要设定层级来显示

如果向让红色在最外面显示只需要：

 #aaaa{
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      top: 30px;
      left: 30px;

       z-index: 3;
       <!--给他设置一个层级-->
    }

关于层级的几个重要问题

• z-index 表示层级
• 元素只有定位后才会有层级这个概念
• z-index的值越大，那么就会出现在界面的最前面