九、HTML中的定位

1、定位

position
static
默认值
没有使用定位
relactive
相对定位
absolute
绝对定位
fixed
锚定

标准文档流

标准文档流
从上到下,从左向右,依次显示网页中的每一个元素
元素分类
行内元素
依次一个挨着一个显示
块级元素
独占一行

static 定位

以标准文档流方式显示
没有定位
默认值

relative相对定位

relative
相对自身原来位置进行偏移

top、bottom、left、right
像素值
正:向右,或,向下
负:向左,或,向上
不脱离标准文档流,原有的位置保留不变,后续元素不能占用其原有位置
九、HTML中的定位_第1张图片
九、HTML中的定位_第2张图片

absolute绝对定位

absolute
偏移设置
top、bottom、left、right
像素值
正:向右,或,向下
负:向左,或,向上
以它最近的一个已经定位的祖先元素为基准进行偏移
若没有已经定位的祖先元素,以浏览器窗口为基准进行偏移
绝对定位从标准文档流中脱离,后续元素会占其原有的位置
九、HTML中的定位_第3张图片
九、HTML中的定位_第4张图片
九、HTML中的定位_第5张图片
九、HTML中的定位_第6张图片

6、fixed 锚点定位

fixed
相对于浏览器窗口

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
             background-color: blue;
        }
        .d2 {
            width: 200px;
               height: 200px;
            background-color: red;
            position: relative;
            top: -100px;
            left: 100px;
        }
        .d3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .d4 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .d5 {
            width: 100px;
            height: 100px;
            background-color: green;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    style>
head>
<body>
<div class="d1">div>
<div class="d2">div>
<div class="d3">div>
<div class="d4">div>
<div class="d1">div>
<div class="d2">div>
<div class="d3">div>
<div class="d4">div>
<div class="d5">div>
body>
html>

九、HTML中的定位_第7张图片

7、z-index重叠时显示的顺序

z-index重叠时显示的顺序
值越大,在上
值越小,在下
特殊的值
0最下面
1688第1个

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: blue;
            position: relative;
            top: 100px;
                 z-index: 2;
        }
        .d2 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: -100px;
            left: 100px;
            z-index: 1688;
        }
        .d3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 0;
        }
        .d4 {
            width: 200px;
            height: 200px;
            background-color: green;
            z-index: 3;
        }
    style>
head>
<body>
<div class="d1">
    <div class="d2">div>
div>
<div class="d3">div>
<div class="d4">div>
body>
html>

九、HTML中的定位_第8张图片

8、透明度

若使用png透明背景图片时,下面的内容可见的,通常不需要透明度,否则图书变淡

方法1:属性
opacity:0.5;

方法2:过滤器
filter:alpha(opacity=50);

浏览器兼容性问题

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .d1 {
            width: 200px;
                  height: 200px;
            background-color: blue;
            position: relative;
            top: 100px;
            z-index: 2;
        }
        .d2 {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: -100px;
            left: 100px;
            z-index: 1688;
            opacity: 0.4;
        }
        .d3 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: 0;
        }
        .d4 {
            width: 200px;
            height: 200px;
            background-color: green;
            z-index: 3;
        }
    style>
head>
<body>
<div class="d1">
    <div class="d2">div>
div>
<div class="d3">div>
<div class="d4">div>
body>
html>

九、HTML中的定位_第9张图片

九、HTML中的定位_第10张图片

9、课堂练习

京东超市
巨超值
九、HTML中的定位_第11张图片
九、HTML中的定位_第12张图片
九、HTML中的定位_第13张图片

你可能感兴趣的:(大数据开发与分析暑期实训笔记,html,前端,javascript,css,webstorm)