css中有很多定位,其中最重要的是相对定位和绝对定位;

定位很重要,不搞好,网页就会很乱,显示的完全不是自己想要的效果,自己必须掌握;

首先说一个重要的结论:绝对定位,是不占位置的,总是相对离自己最近的一个相对定位的元素,进行相对定位,所以一个元素准备使用绝对定位,首先第一步就必须检查

他最近的父级元素是否是相对定位,如果没有设置需要设置,不然这个绝对定位元素会去找自己元素的上上级元素(相对定位的元素),来进行定位。

所有这里给出几个结论:

相对定位和绝对定位都是相对元素(自己或者别的)元素进行定位,其中相对定位就是普通文档流,然后设置top,等等就是相对自己本来的位置进行调整位置

绝对定位就是相对于父级元素进行定位,好像更含有相对位置的意思,却叫绝对定位这个名字

其实这个也不难理解:

相对于别人的位置就是绝对的位置,相对于自己的永远是相对的,

就像物理中位置,相对别的位置(0坐标)就是绝对位置,相对自己的位置就是相对位置,

自我永远是相对的,相对别人是绝对的,物理中的距离是相对的!

关于网页设计的css+html相对定位和决定定位的理解的更多相关文章

  1. 网页设计(CSS&JS)

    实验一  简单静态网页设计 一. 实验目的: 复习使用记事本编辑网页的方法. 熟悉不同表单控件类型的应用. 练习使用记事本在网页中添加表单与表单元素. 二. 实验内容: 根据提供的素材设计在线调查问卷 ...

  2. HTML学习笔记——标准网页设计+使用CSS、Javascript

    一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离.   内容 + 表现 = 页面  ---  即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...

  3. 网页设计——7.css的入门

    css的介绍 div+css的设计: 什么是div? 理解示意图: 实例操作: 这里就要用到div+css的布局操作 先写一个html文件,见下图: <html><head>& ...

  4. 网页设计简史看设计&代码“隔膜”

    本文来自网易云社区 作者:马宝 设计与代码之间隔膜所在?既然你诚心诚意地问了,我就大发慈悲地告诉你.为了防止地球被破坏,为了维护世界的和平,为了贯彻爱与真实的邪恶~,我是穿梭在前端与设计之间爱与美丽的 ...

  5. css+div网页设计(二)--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  6. 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正

    最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...

  7. 手机web——自适应网页设计(html/css控制)

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...

  8. 【转】手机web——自适应网页设计(html/css控制)

    手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...

  9. 手机web——自适应网页设计(html/css控制) - 51CTO.COM

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

随机推荐

  1. webpack开发环境配置和生产环境配置

    开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...

  2. Lego-美团点评接口自动化测试实践

    Lego-美团点评接口自动化测试实践 2018-02-07 转自:Lego-美团点评接口自动化测试实践 目录 一.概述  1.1 接口自动化概述  1.2 提高ROI    针对“减少投入成本”    ...

  3. java 向上转型与向下转型

    转型是在继承的基础上而言的,继承是面向对象语言中,代码复用的一种机制,通过继承,子类可以复用父类的功能,如果父类不能满足当前子类的需求,则子类可以重写父类中的方法来加以扩展. 向上转型:子类引用的对象 ...

  4. Windows下GO的开发环境配置

    本文主要内容如下几点: 下载安装GO 配置多个工作区,第一个默认放第三方包,其他的放项目代码 包管理器godep的安装使用 安装过程中的一些坑(墙) vscode中使用go 1. 下载并安装go 官网 ...

  5. 没有基础的初学者学java怎样快速入门?超全的学习路线图

    现在地球人都知道互联网行业工资高,上万都是小case,不值一提.可是对于大部分人来说,工资七八千都算很难了.那我也想学java,当程序员,赚大钱.可是作为一个初学者,怎样才可以快速入门呢?早点入门就可 ...

  6. redis笔记总结之redis数据类型及常用命令

    三.常用命令 3.1 字符串类型(string) 字符串类型是Redis中最基本的数据类型,一个字符串类型的键允许存储的数据的最大容量为512MB. 3.1.1 赋值与取值: SET key valu ...

  7. MSIL实用指南-创建字段

    本篇讲解怎么创建字段,主要是在修饰符的创建上. 创建字段的方法是TypeBuilder.DefineField,传入字段名称.字段类型.字段修饰符等参数,返回一个FieldBuilder对象.先看这一 ...

  8. Sublime + Python3 + 虚拟环境 + 去除 中文输出乱码

    MacBook Pro Retina 13 2013年底版 所用软件 1. Sublime Text 3安装 Virtualenv package 2. 用 iterm2 .或者终端安装zip:apt ...

  9. 元组tuple基本操作

    创建一个元组 tuple1=(1,2,3,4,5,6,7,8) tuple的标志仿佛是(),但是,有()不一定是元组,没有()不一定不是元组 tuple2=(1)#tuple2是一个整型 tuple3 ...

  10. 笔记:I/O流-文件操作

    Java库中使用 Path 和 Files 类封装了在用户机器上处理文件系统所需要的所有功能,可以使用Paths来获取一个具体的Path对象,来表示具体的路径. 路径 Path表示的是一个目录名序列, ...