首页 > 软件开发 > HTML >

如何定位html元素

来源:互联网 2023-03-16 19:19:31 341

浮动DIV,也就是定位html元素,是一个很常用到的东西,小编今天就来讲一下如何使一个DIV固定在页面某一位置,不随屏幕滚动而离开。AHU办公区 - 实用经验教程分享!

工具/原料

  • Dreamweaver cs6或其他版本

方法/步骤

  • 1

    首先,这里有一个div。里面是一个img,我们为了让它显眼些,给它一个边框。AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

  • 2

    如何让它移动到页面的某一位置呢?在这里我们用到了position属性。AHU办公区 - 实用经验教程分享!

    position属性用于定位元素,它有5个值,分别是absolute、fixed、relative、static、inherit,注意,任何版本的IE都不支持inherit属性。AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

  • 2本页面未经授权抓取自百度经验
  • 3

    我们在这里要用到的是fixed属性,它可以把一个元素固定在页面的某个位置。AHU办公区 - 实用经验教程分享!

    left、right、bottom、top可以指定一个元素距离边框的位置,但是,如果没有position:fixed;就是无效的,如图。AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

  • 4

    加上position:fixed;的效果如图所示。AHU办公区 - 实用经验教程分享!

    我们把图片变小之后再来看看。AHU办公区 - 实用经验教程分享!

    效果非常明显,图片被固定在页面的某个位置上。AHU办公区 - 实用经验教程分享!

    这样这张图片就彻底被固定在了右下角,即使页面移动也不会改变位置。AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

    如何定位html元素AHU办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!AHU办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码