zoukankan      html  css  js  c++  java
  • CSS定位

    定位

    CSS的定位属性允许你定位一个元素。 它也可以放置背后还有一个是元素,并指定时会发生什么元素的含量是太大了。

    元素可以放置使用上,下,左,右属性。 然而,这些属性将不会工作,除非该位置属性设置第一次。 他们还根据工作方式不同的定位方法。

    有四种不同的定位方法。


    静态定位

    HTML元素的默认静态定位。 静态定位的元素总是定位根据页面的正常流动。

    静态定位元素不受顶部,底部,左,右属性。


    固定位置

    一个固定位置的元素的位置相对于浏览器窗口。

    它不会移动,即使窗口滚动:

    范例

    p.pos_fixed
    {
    position:fixed;
    top:30px;
    right:5px;
    }

    注: IE7和IE8的支持只有一个固定值指定!DOCTYPE是。

    固定位置的元素会被移除的正常流动。 该文件和其他元素像固定定位的元素不存在。

    固定位置的元素可以重叠的其他因素。


    相对定位

    相对定位的元素的位置相对于它的正常位置。

    范例

    h2.pos_left
    {
    position:relative;
    left:-20px;
    }
    h2.pos_right
    {
    position:relative;
    left:20px;
    }

    相对定位元素的含量可移动和重叠等元素,但元素的预留空间仍然保持在正常流动。

    范例

    h2.pos_top
    {
    position:relative;
    top:-50px;
    }

    相对定位的元素常常被用来作为绝对定位元素的容器块。


    绝对定位

    一个绝对位置的元素的位置相对于父元素的第一个位置,有一个比静态其他。 如果没有找到这样的元素,包含块<html>:

    范例

    h2
    {
    position:absolute;
    left:100px;
    top:150px;
    }

    绝对定位的元素会被移除的正常流动。 该文件和其他元素像绝对定位的元素不存在。

    绝对定位的元素可以重叠的其他因素。


    重叠元素

    当元素位置以外的正常流动,他们可以重叠的其他因素。

    的z - index属性指定堆栈的元素(元素应该放在前面或后面,其他人)的顺序。

    一个元素可以产生积极或消极的堆叠顺序:

    范例

    img
    {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1
    }

    一个更大的堆栈顺序元素在元素的前总是以较低的堆叠顺序。

    注: 如果两个定位元素重叠,没有一个Z -索引指定,该元素的HTML代码的最后一个位置将显示在顶部。

  • 相关阅读:
    [组件封装] 微信小程序
    发布一个npm包(webpack loader)
    深入理解JavaScript隐式类型转换(详解 +
    通过nginx代理之后,获取客户端ip
    IntelliJ Idea 常用快捷键列表
    Example For maven-compiler-plugin
    maven 使用tomcat插件 自动化部署war
    jsoup: Java HTML Parser (类似jquery)
    Export Data from mysql Workbench 6.0
    安装openJDK 8
  • 原文地址:https://www.cnblogs.com/zhxhdean/p/2077601.html
Copyright © 2011-2022 走看看