css-浮动与定位

本篇博客是CSS学习阶段的最后一篇博客了，在不久的将来我将会上传一些我对于JS（JAVA SCRIPT）的总结博客。

浮动

float属性是为了能让Web开发人员能够更简单的实现布局，例如在文本中浮动的图像，类似于word中的图片悬浮效果。

简单的例子：

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}
p {
  line-height: 2;
  word-spacing: 0.1rem;
}
img {
  float: left;
  margin-right: 30px;
}

<h1>Simple float example</h1>

<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

结果：


定位

定位允许我们覆盖html文档中的文档流行为，通过position属性我们可以将浮动在页面上其他部分顶部的UI元素，始终停留在浏览器窗口中的相同位置。

静态定位

静态定位是每个元素获取的默认值

.positioned {
  position: static;
}

相对定位

相对定位是我们将要看的第一个位置类型。 它与静态定位非常相似，但我们仍然可以修改它的最终位置，包括让它与页面上的其他元素重叠

.positioned {
  position: relative;
}

如果我们想要修改元素的位置，那么我们就要使用top，bottom，left，right属性。
top, bottom, left, 和 right 可以精确指定要将定位元素移动到的位置。

使用方法：

.positioned {
  position: relative;
  top: 30px;
  left: 30px;
  bottom:30px;
  right:30px;
}

绝对定位

绝对定位通常用于建立一个不存在于正常文档布局流中，不干扰页面上其他元素位置的隔离的UI功能，类似于弹出信息框。

.positioned {
  position: absolute;
}

固定定位

这种属性为fixed的定位覆盖，这与绝对定位的工作方式完全相同，唯一的区别是L绝对定位固定元素是相对于<html元素>，而固定定位元素则相对于浏览器本身。这意味着我们可以建立类似于导航菜单的UI元素

.positioned {
  position: fixed;
}