前端absolute(前端开发培训机构)

web前端当绝对定位在相对定位里面时，绝对定位可以

1.定位的专业解释

(1)语法

position:static|absolute|fixed|relative

(2)说明

从上面语法可以看出，定位的方法有很多种，它们分别是静态(static)，绝对定位(absolute)，固定(fixed)，相对定位(relative)。在这个教程里，我不逐一讲，只讲最常用也是最实用的两个定位方法：绝对定位(absolute)、相对定位(relative)。

绝对定位(absolute)：将被赋予此定位方法的对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据body对象左上角作为参考进行定位。绝对定位对象可层叠，层叠顺序可通过z-index属性控制，z-index值为无单位的整数，大的在最上面，可以有负值(目前负值FF不支持)。

相对定位(relative)：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

2.定位的形象解释

我先来架设一个虚拟的场景：有一个矩形的房间，里面还有一个水桶装了些水，水里还浸泡着一个西瓜，这个房间半空中还有不少的钩子用于挂东西用。现在我把网页元素与上面物件对应上，那么房间就是一个网页，水桶是网页中的一个板块，桶中的水就是文本流，西瓜就是将要被定位的对象。

(1)贡献的绝对定位(absolute)

对照前面解释，如果西瓜被赋予绝对定位，那么就等于把西瓜从水中捞起来挂在半空中的钩子上，水桶中西瓜原来占用的空间水会自动填补它(绝对定位对象会让出自己原先占用位置，所以说它是贡献的)。此时如果之前没有对水桶进行定位设定，那么被拿起的西瓜位置不会再受水桶位置影响，水桶怎么移动，西瓜还是挂在原来位置，至于西瓜要怎放，则以房间左上角(body左上角)为准，用left，right，top，bottom值来定位。

但是如果水桶也给出了定位设置(通常是相对定位，下面有讲到这一实用技巧)，此时西瓜的摆放就没有那么自由了，尽管此时西瓜被拿起来了不会影响水桶中的水(文本流)，但它还是要听桶的话，桶会告诉西瓜“你可以活动，但应该在我的范围内走动，比方说我要你在我左上方1米处，你就要跟死这一点，我走你也要跟着走”，如果桶中有很多个西瓜，可以全部拿出来吊到半空中，它们将被安排在不同高度的空间(层)，所以在房顶垂直往下看，有可能看到不同西瓜层叠在一起的情况(这个所谓的高度在网页中是不存在的，就像FLASH动画中的不同层上安排了元素，但它们在看时不会有深度感觉)。可见绝对定位的对象参考目标是它的父级，专业称之为包含块。

(2)自私的相对定位(relative)

相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。相对定位也比较独立，做什么事它自己说了算，要定位的时候，它是以自己本身所在位置偏移的(相对对象本身偏移)。再拿前边作比如来解，那么此时西瓜似乎是有魔法的，如果西瓜通过相对定位在水桶中偏移了你会看到一个现实生活中不存在的现象：水中有一个地方水凹下去了，周围的水不能填补它，西瓜看起来在旁边，如果搅动一下桶中的水，那个凹的位置会发现改变(文本流对相对定位对象还存在影响)，但是凹处到西瓜出现的距离始终保持一致。可见文本流与它之间还会互相影响，因为对象并没有真正脱离文本流，就像有两个人在同一层楼水平移动的过程中会有碰头的机会。

(3)总结两种定位的特征

绝对定位就像是把不同对象安排到了一栋高楼的不同楼层(一般指不是第一层，我们这里理解为文本流就放在首层)，它们互不影响，但是它们怎么移动与你楼的地基和面积(父级)有关。相对定位指对象还是在首层楼与文本流一起存放，它们之间肯定存在影响。

(4)对特殊情况的补充

在用相对定位和绝对定位的时候，有一种情况是它们的定位值用到了负值则对象可沿相反方向移动，刚才说到的把对象安排在一栋楼的不同层，如果某个对象一开始就是背靠着最外边墙的，此时再用一个负值定位它，它就会神奇般地跑出墙外去了，当然现实中可没有这种惊险而又神奇的事发生

web前端必备英语词汇都在这儿了，客官你了解多少？

appendChild 放置到某元素最后

attribute 属性

addEventListener 添加侦听器

assign 赋值

alert 弹出框

append 添加

appendTo 添加到

absolute 绝对的

active 活动的，激活的，标记的一个伪类

align 对齐

alpha 透明度，半透明anchor 锚记标记是这个单词的缩写

anchor 锚记a标记是这个单词的缩写

arrow 箭头

auto 自动

appName 程序名

appCodeName 程序代号

appVersion 程序版本

appAgent 程序代理

abs 取绝对值

array 数组

back 超过范围的三次方缓动

bounce 指数衰减的反弹缓动

before 在...之前

blur 当输入框失焦的时候触发

BOM 全称Browser Object Model 浏览器对象模型

blur 失焦

bind 绑定

background 背景border 边框

border 边框

banner 页面上的一个横条both 二者都是clear 属性的一个属性值

both 二者都是clear 属性的一个属性值

black 黑色

bottom 底部，是一个CSS 属性

blink 闪烁

box 盒子

block 块

br 换行标记

blue 蓝色

bug 软件程序中的错误

body 主体，一个HTML 标记

building 建立

bold 粗体

button 按钮

break 中断

bool 布尔

boolean 布尔

bubble 冒泡

cubic 三次方的缓动

circular 圆形曲线的缓动

chain 当执行一种缓动效果后可以继续使用另一个缓动效果

createElement 创建新元素

createTextNode 创建文本节点

childNodes 返回子节点

cancelBubble 删除冒泡

click 点击事件

change 内容发生改变，并失焦后才触发该事件

contextmenu 右击事件

clientX 光标相对于该网页的水平位置

clientY 光标相对于该网页的垂直位置

close 关闭当前页面

confirm 输入框

clientWidth 获取元素宽度

clientHeight 获取元素的高度

childNodes? 获取所有子节点?

children 返回子元素

cloneNode 复制节点

Clone 克隆、复制

chekbox 复选框

cell 表格的单元格

color 颜色

center 中间，居中

connected 连接的

contact 联系

child 孩子

content 内容

circle 圆圈

crosshair 十字叉丝

class 类别

css 层叠样式表

clear 清除

cursor 鼠标指针

cm 厘米

centimeter 厘米

continue 继续

close 关闭

ceil 向上取整

charAt 获取某位置字符

DOM 全称Document Object Model 文档对象模型

default 不执行

DOMMouseScroll 在火狐浏览器中的滚轮事件

document 文件，文档

dbclick 双击

dashed 虚线

display 显示，CSS 的一个属

decimal 十进制

division 分区，div 就是这个单词的缩写

decoration 装饰

document 文档

default 默认的

definition 定义

dotted 点线

double 双线

design 设计

do 做

exponential 指数曲线的缓动

elastic 指数衰减的正弦曲线缓动

error 错误 过失

element 元素

else 否则

focus 当输入框聚焦的时候触发

firstChild 第一个子节点

firstElementChild 返回第一个标签节点

function() 函数

father 父亲

float 浮动

filter 滤镜，过滤器

font 字体

first 第一个

for 在循环语句中的一个保留字

fixed 固定的

four 4 个

function函数，功能

getAttribute 获取属性

getElementsByClassName 根据class标签获取元素

getElementsByName? 通过元素的Name属性值

getElementById? 通过元素Id，唯一性

getElementsByTagName 通过标签名查找元素

gif 一种图像格式

green 绿色

gray 灰色

history 对象

host 主机

height 高度

hover 盘旋;徘徊;犹豫

hidden() 隐藏

hack 常用于CSS 中的一些招数，或者类似于偏方的技巧

here 这里

hand 手

hidden 被隐藏

head 头部

home 首页

height 高度

horizontal 水平的

help 帮助

hover 鼠标指针经过时的效果，或称为“悬停状态”

input 当输入的时候实时触发

innerHeight 内部高度

innerWidth 内部宽度

in 从0开始加速的缓动

inOut 前半段从0开始加速，后半段减速到0的缓动

infinity 无线循环

insertBefore 插入到某元素前

image 图像

inline 行内

important 重要的

inner 内部的

indent 缩进

italic 意大利体，斜体

index 索引

if如果

int：整数

indexOf：判断某字符的首次位置

jpg 一种图像格式justify 两端对齐

justify 两端对齐

keyCode 按键编码

keydown 按下按键

keyup 按下按键抬起

linear 匀速

lastChild? 返回最后一个子节点

lastElementChild? 返回最后一个标签节点?

language 语言

line 线

last 最后一个

link 链接

left 左边

list 列表

length 长度

lowercase 小写

level 级别

mouseover 移动到元素上

mouseout 从元素上移开

mousemove 移动鼠标

mousewheel 在其他浏览器的滚轮事件

mousedown 鼠标按下事件

mouseup 鼠标抬起事件

margin 外边距

millimeter 毫米

max 最大的

min 最小的

medium 中间

model 模型

menu 菜单

move 移动

middle 中间

nextElementSibling 返回下一个兄弟元素

nextSibling 返回下一个兄弟节点

nextElementSibling? 下一个兄弟元素

nodeValue 节点值

nodeType 节点类型

nodeName 标签名称

navigation 导航

none 无，不，没有

new 新的

normal 标准

number 数字

null 空，空值

new 新建

outerHeight 整个高度

outerWIdth 整个宽度

open 打开新页面

onscroll 窗口滚动事件

onresize 窗口大小监听事件

onload 图片加载事件

offsetLeft 获取元素距离左侧的距离?

offsetTop 获取元素距离顶部的距离

offsetWidth 获取元素自身宽度

offsetHeigh 获取元素自身高度?

onload 在装载时

onclick 在点击时

ondblclick 在双击时

onmouseover 在鼠标进入时

onmouseout 在鼠标离开时

onmousemove 在鼠标移动时

onmousedown 在鼠标按下时

onmouseup 在鼠标抬起时

onkeydown 在按键按下时

onkeyup在按键抬起时

onkeypress 在按键时

onsubmit 在提交时

onchange 在改变时

onfocus 在获得焦点时

onblur 在失去焦点时

onscroll 窗口滚动事件

onresize 窗口大小监听事件

out 减速到0的缓动

onStart 开始事件

onComplete 完成事件

onStop 停止事件

onUpdate 更新事件

object 对象

optional 可选的

oblique 一种斜体

orange 橙色

one 一个

outer 外面的

only 仅仅

overflow 溢出

open 打开

previous 前一个

prevent 阻止

pageX 光标相对于该网页的水平位置

pageY 光标相对于该网页的垂直位置

port 端口

protocol 协议

prompt 提示框

parentNode 返回父级节点

parentElementNode 获取已知节点的父节点

previousSibling 返回上一个兄弟节点

previousElementSibling 返回上一个兄弟元素

password 密码

position 位置

prepend 预先

padding 内边距

progress 进度

point 点

public 公开的

pointer 指针，指示器

purple 紫色

position 定位，位置

pop 弹出

push 压入

open 打开

option 选项

quadratic 二次方的缓动

quintic 五次方的缓动

quartic 四次方的缓动

querySelector 根据标签名获取第一个元素

querySelectorAll 获取所有标签名的元素

repeat 次数

remove 删除当前节点

replaceChild 替换节点

removeEventListener 取消侦听器

reload 刷新

removeAttribute 删除属性

removeChild 删除父节点的某个子节点

radio 视频

red 红色

resize 重新设置大小

relative 相对的

right 右边

repeat 重复，平铺

row 行

replacement替换

return 返回

random 随机

round 取整

sinusoidal 正弦曲线的缓动

start 开始

stop 停止

setinterval 时间函数

sibling 兄弟

scrollTop 获取文档滚动高度

screenX 光标相对于该屏幕的水平位置

screenY 光标相对于该屏幕的垂直位置

setAttribute 设置属性

scrollHeight 获取文档整体高度

scrollTop 获取文档滚动高度

scrollLeft 元素左边界

setAttribute 设置节点上的属性

submit 提交

scroll 滚动

shadow 阴影

silver 银色

special 特殊的

size 尺寸

square 方块

solid 固体，实线

static 静态的

solution 方案

strong 强壮，加粗的

son 儿子

style 样式

span 一个HTML 标记

switch 切换

setInterval 设置反复性定时器

setTimeout 设置一次性定时器

srcElement 源对象，事件源

split 分割

substr 截取字符串

substring 截取字符串

sqrt 取开方

status 状态

sort 排序

slice 切片，划分

splice 铰接，粘接

textContent 文本添加文字

table 表格

title 标题

td 单元格的HTML 标记

top 顶部

toLowerCase 转换为小写

toUpperCase 转换为大写

text 文本

tr 表格中“行”的HTML 标记

thick 粗的

transitional 过渡的

thin 细的

two 两个

three 三个

type 类型

through 穿过

this 这个，当前

typeof 类型

underline 下划线

uppercase 大写

upper 上面的

url 网址

vertical 竖直的

visited 访问过的

var 定义变量

wrap 包裹

window 窗口

white 白色

width 宽度

while 当...的时候

write 写入

yellow 黄色

前端开发中经常遇到的一些英语单词

很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君 点击此处 ，

同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。

在前端开发与探讨过程中熟悉并了解一些英语是非常关键的，下面整理了一些基础的前端英语单词，希望对给位有所帮助

首先、页面布局（layout）

header 头部/页眉；

index 首页/索引；

logo 标志；

nav/sub_nav 导航/子导航；

banner 横幅广告；

main/content 主体/内容；

container/con 容器；

wrapper/wrap 包裹（类似于container）；

menu 菜单；

sub_menu/second_menu 子菜单/二级菜单；

list 列表；

section 分区/分块（类似于div）;

article 文章；

aside 侧边栏/广告；

footer 页脚/底部；

title/sub_title 标题/副标题；

news 新闻；

hot 热点；

pro 产品（product）；

company 公司；

msg/info 信息（message）/消息；

ads 广告（advertisements）;

icon 小图标；

img 图片（image）；

copyright 版权；

contact_us 联系我们；

friend_link 友情链接；

tel 联系电话（telephone）；

address 地址；

其次、CSS样式（style）

CSS 层叠样式表 (Cascading Style Sheets) ；

background 背景；

position 位置/定位；

relative/absolute/fixed 相对定位/绝对定位/固定定位；

float 浮动；

clear 清除；

vertical-align: middle/top/bottom; 垂直居中/上/下；

line-height 行高；

margin 外边距；

padding 内边距；

border 边框；

solid/dashed/dotted 实线/线虚线/点虚线；

border-radius 圆角；

shadow 阴影；

display 展示；

hidden 隐藏；

block/inline-block 块元素/行内块；

overflow 溢出；

cursor 光标；

animation 动画；

css sprites 雪碧图/图片精灵；

column 分列；

flex 弹性（布局）；

然后、表单（form）与表格（table）

form 表单；

action 行为；

method 方式/方法；

input 输入框；

label 标签；

password 密码；

radio 单选框；

checkbox 复选框；

btn 按钮（button）；

submit/reset 提交/重置；

textarea 文本域；

select/option 选择框/选择项；

placeholder 占位符（起提示作用）；

search 搜索；

icon 小图标；

autofocus 自动聚焦；

disabled 禁用；

checked 选中（单选框/复选框）；

selected 默认选择项（下拉选择框）；

required 必填项；

readonly 只读；

table 表格；

thead/tbody/tfoot 表格标题/主体/底部；

colspan 跨列；

rowspan 跨行；

cellspacing 单元格间距（类似于margin）；

cellpadding 单元格边距（类似于padding）；

border-collapse: collapse; 边框

相关资料：

详解html中页面跳转传递参数的问题

html5关于标签的知识吧

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群

关于书籍：需要学习资料的小伙伴们可以加群， 点击此处

web前端如何实现一个div固定在某个位置

在前端里面，如何将一个div固定在某个位置，属于css内position定位的内容。position定位属性有五种类型，分别如下：

1.static 定位。html元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

2.fixed 定位。元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

3.relative 定位。相对定位元素的定位是相对其正常位置。

4.absolute 定位。绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于整个页面。

5.sticky 定位。粘性定位是基于用户的滚动位置来定位。它依赖于用户的滚动，在position:relative与position:fixed定位之间切换。