本题点评

在web前端中，元素定位是必须掌握的，是网页制作的必备技能，也是衡量是否为一个合格的web前端开发的标准之一，在网页设计中，很多地方都需要使用定位，例如菜单弹出，提示信息层等都需要定位。所以本题的难易程度为简单。

解题思路

position为元素定位属性，包含以下属性值

1. absolute绝对定位

相对位置为父元素为非static的第一个父元素进行定位。

2. fixed  固定定位（老IE6不支持）

相对于浏览器窗口进行定位。

3. relative相对定位

相对于其正常（默认布局）位置进行定位。

4. static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）

加分项

  1. 所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
  2. absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
  3. absolute定位忽略padding，相对位置为相对定位容器的左上角内边框，

Web前端面试指导(十)：元素定位有哪些？的更多相关文章

  1. Web前端面试指导(十九)：CSS样式-如何清除元素浮动？

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  2. Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?

    题目点评 这道题目的提问比较多,连续问了三个问题,正常元素.绝对定位元素.互动元素如何居中,而且居中没有说清楚是垂直居中还是水平居中,要回答清楚这个问题,必须得有深厚的功底,而且要分类的来回答,条理要 ...

  3. Web前端面试指导(十八)：用纯CSS创建一个三角形的原理是什么？

    题目点评 三角形的图标在网页设计是很常见的,属于基本常识题,只要在练习做到过这个功能都能回答出来,可以把你做过的思路描述出来就可以了,本题的难易程度为简单 答题要点 1.采用的是均分原理 盒子都是一个 ...

  4. Web前端面试指导(十五)：CSS样式-display有哪些作用？

    题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情. 元素默认的display值的情况如下(这个一般很少人注意这一点) block( ...

  5. Web前端面试指导(十六)：为什么要初始化CSS样式？

    题目点评 这个题目乍一看感觉怪怪的,什么叫初始化样式了?如果换一句话你可能就理解了,就是通用样式.这道题目主要涉及的是理论方面的知识,不用写代码,只要描述清楚就可以了 初始化样式的原因 因为浏览器的兼 ...

  6. Web前端面试指导(十二)：::before 和:before有什么区别？

    题目点评 这个问题看来很简单,但如果之前没有琢磨这个问题,给人感觉也是门头一垂,听到这个题目就懵逼了,因为原来从来没有注意过这个问题,即便有注意这个问题也不能很好的回答清楚.回答的技巧就是从相同点和不 ...

  7. Web前端面试指导(二十)：JavaScript中如何翻转一个字符串？

    题目点评 字符串作在程序中是非常常见的,因为程序中绝大部分的数据都可以当作字符串来处理.需要对字符的处理方法比较熟悉,在回答的时候尽量能够说出多种解决方法更好! 字符串翻转的方法 1)使用字符串函数 ...

  8. Web前端面试指导(十七)：一个满屏 品 字布局 如何设计?

    题目点评 这道题目有可能是笔试题,有可能面谈的时候进行叙述,如果是笔试题要求对css样式代码非常熟练,如果是面谈叙述,就需要你的表达能力非常强,要抓住要点,把需要用到的技能点讲清楚就可以了. 需要用到 ...

  9. Web前端面试指导(九)：盒子模型你是怎么理解的？

    问题分析 这道题问得比较宽泛,一定要找准切入点,如果切入点找不准,很容易乱答,甚至答偏,所以找准切入点是非常的重要的. 解答思路 1)盒子模型有两种,W3C和IE盒子模型 (1)W3C定义的盒子模型包 ...

随机推荐

  1. 2008R2 无法安装 HDP Apache 系列服务解决方案

    执行下面的 PS 就好了. 特别是 第三行在执行的时候选择 [A]   Set-ExecutionPolicy "AllSigned" Enable-PSRemoting Set- ...

  2. 在windows10下vs2017配置opencv4.0.0

    第一次配置时,有些.dll文件出错,所以用重新下载opencv配置了一遍,终于可以了,喜极而泣! 一.下载OpenCV4.0 直接到官网https://opencv.org/下载 然后在下个页面选择 ...

  3. requests模块的一些总结

    一.cookie模拟登录的三种方式 #!/usr/bin/env python # -*- coding: utf-8 -*- #author tom import requests post_url ...

  4. 微信小程序图片上传放大预览删除代码

    效果: 一,下面是上传图片的效果 image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { v ...

  5. ASP.NET Core文件上传、下载与删除

    首先我们需要创建一个form表单如下: <form method="post" enctype="multipart/form-data" asp-con ...

  6. 【C语言】输入一个整数N，求N以内的素数之和

    [C语言]输入一个整数N,求N以内的素数之和 /* ========================================================================== ...

  7. nginx 代理服务指令详解

    nginx 正向代理与反向代理说明图 超级形象说明. 正向代理指令: 1, resolver 这个用于DNS服务器的ip . DNS服务器的主要工作是进行域名解析,将域名映射为对应IP地址 resol ...

  8. nodejs初探（一）nodejs开发环境搭建

    简介 JavaScript是一种运行在浏览器的脚本.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件 ...

  9. Java变量类型，实例变量 与局部变量 静态变量

    实例变量: 实例变量在类中声明,但在方法的外面,构造函数或任何块. 当空间分配给某个对象在堆中,插槽为每个实例变量创建值. 当一个对象与使用关键字 “new” 来创建,在对象被销毁销毁创建的实例变量. ...

  10. Zookeeper概念学习系列之zookeeper是什么？

    1. Zookeeper是Hadoop的分布式协调服务. 2. 分布式应用程序可以基于它,来实现同步服务,配置维护和命名服务等. 3. zookeeper可以保证数据在zookeeper集群之间的数据 ...