position属性 CSS的position属性完全解析(2/6)

本篇文章主要介绍了"position属性 CSS的position属性完全解析"，主要涉及到position属性方面的内容，对于CSSjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 一、定位基本原理对于前端开发工程师来说，编写CSS是前端开发工作中必不可少的一个内容，在CSS中的position属性又是非常重要的一个方面。顾名思义，所谓po...

1. @media screen {   
2.     h1#first { position: fixed; }   
3. }   
4. @media print {   
5.     h1#first { position: static; }   
6. }  

还有一个inherit值，不用多说，就是从父元素继承position值了。

三、定位方式：top, right, bottom, left

这四个属性其实可以放在一块儿说，其实是差不多的，只是定位的相对基线变了而已。文档上的说明有些啰嗦了，不过that's what official document is对吧？

可设定的值为：length, percentage, auto, inherit

不论设定的值为什么，意义都是元素的上右下左距离父元素的上右下左的边距。

这里要提一下auto值，对于非替换元素(non-replaced elements)和替换元素(replaced elements)auto的表现是不一样的，非替换元素指的是浏览器根据标签的元素和属性来判断具体显示的内容，如：

XML/HTML Code复制内容到剪贴板

1. <input type="text" />  

这是一个文本输入框，换成其他的属性的话，浏览器的显示就会不一样。

替换元素的例子：

XML/HTML Code复制内容到剪贴板

1. <p>I'm classicemip>  

(X)HTML的大多数元素都是非替换元素，他们将内容直接告诉浏览器，浏览器再显示出来。

下面回到auto上来，对于非替换元素，auto值的效果取决于哪些相关的属性同样具有auto值，比较难理解是吗，好的，我们给出下面的例子：

CSS Code复制内容到剪贴板