css中的定位有哪些？ 在CSS中，定位的方式有普通定位，相对定位，绝对定位、固定定位定位这四种，对新手来说，可能对这四种定位方式的区别不是很了解，对此这篇文章就给大家分享一下css中的四种定位及它们的区别，感兴趣的朋友就继续往下看吧。

    一、普通定位(Static)

    在我们的开发过程中，除非专门指定，否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列，框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。

    二 . 相对定位（relative）

    在我们前端开发中，relative相对定位一直被看作普通文档流定位模型的一部分，定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动，元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。

    结果

    三 . 绝对定位（absolute）

    在前端开发中，相对于已定位的最近的父类元素，如果没有已定位的最近的父类元素，那么它的位置就相对于最初的包含块（如body）。绝对定位的框可以从它的包含块向上、右、下、左移动。

    结果

    四 .固定定位（fixed）

    相对于浏览器窗口，其余的特点类似于绝对定位。fixed元素就是固定在浏览器某个位置的元素，绝对定位是固定在页面的，如果滚动滚动条的话绝对定位的元素也会滚上去，fixed元素不会。

    最后

    这几种定位方式各有千秋，很多小白就经常问老李了，我们写页面的时候，这4种布局方式应该用哪个呢？（这问题一听就很小白了）

    最后给大家说一下吧，在我们现在专业的前端开发工作中，用的最多的不是绝对定位，也不是相对定位，而是绝对定位和相对定位的结合使用。（小白：WTF????合体？？？）

    并不是合体出现什么新的定位方法啦。而是我们去前端开发中的一种布局书写规范：

    父相子绝（即父元素使用相对定位，子元素使用绝对定位，一起结合实现布局。）

    这种布局规范是现阶段前端开发公认的布局方法，也能避免很多错误的出现。 

    关于css定位的内容就介绍到这，现在大家对这四种css定位方式及区别应该都了解了吧，希望本文能对大家有帮助，想要了解更多css定位的内容，大家可以关注群英网络其它相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS3中如何将元素设置为隐藏，都有哪些方法？

  这篇文章给大家分享的是CSS3中如何将元素设置为隐藏。小编觉得挺实用的，因此分享给大家做个参考，文中介绍了四种方法，示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

• CSS动画实现背景无缝无限循环的实现示例

  这篇文章主要介绍了CSS动画实现背景无缝无限循环的实现示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS样式书写顺序是怎样的？命名要注意什么?

  这篇文章给大家分享的是有关CSS样式书写顺序以及命名要注意哪些的内容。小编觉得挺实用的，对新手学习CSS有一定的帮助，因此分享给大家做个参考，接下来一起跟随小编看看吧。

• 怎么用CSS3制作渐变动画效果，代码是什么

  这篇文章主要介绍了css3实现的加载动画效果，帮助大家更好的利用css3制作网页，感兴趣的朋友可以了解下

• CSS定位有几种方法，与Xpath定位有哪些不同

  大部分人在使用selenium定位元素时，用的是xpath定位，css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁一、CSS 选择器常见符号：<br /> #表示 id选择器<br /> .表示 clas