[CSS]使用位置属性!如何使用相对·abosolute·固定

“我不知道如何使用CSS位置。”
“当我在智能手机看到它时,布局被打破了。老实说,CSS的位置很难使用”

这对刚刚开始的人来说是一种自然印象。所有网站都是“多久使用,方便,所以可以使用”,并且需要时间,并且需要时间来习惯它,无论您是否可以在任何场景中使用它。

但请放心。一旦你向自己移动手,就开始移动你的手。行为和点之间的差异大致掌握。确实,获取需要时间,但如果您首次理解正确的理解,则随后的障碍将立即下降。让我们不要害怕。

[对于初学者]仔细解释如何编写CSS(样式表)

CSS的位置是什么?

“位置”是CSS使用的属性之一。特别是,它是“位置”来确定元素的“布置”的作用。作为一个基本用法,写下如下。

.要素セレクタ{
  position: static/relative/absolute/fixed/stickyをここに配置する。;
}

在这里,可能有人在英语卡塔卡纳符号中不好。所以让我们轻松。属性是指以下CSS元素:

确定“放置”的属性

顺便说一下,确定“放置”的属性不仅是“位置”。这一次,我们将解释“位置”,但知道“浮动属性”或“显示属性”也是“位置”。您需要与设计的目的一起使用它。

优点 贬低
位置物业 它面临着安排的详细名称。堆叠元件时特别合适。 通过改变屏幕尺寸很难调整。如果设计失败,则由于屏幕大小的差异,元素可以重叠。
浮动财产 它适用于简单的布局创建,较小的变化等。对元素的重叠没有担忧。 它不会转到影响布局和页面配置的复杂安排。
显示属性 俯视,它适用于简单的布局创作,较小的变化等。已经准备了各种选项,而不是浮动,并且使用宽度。 它不适合复杂的布置。

可以采用“位置”的值类型

以下唯一的唯一唯一对理解“立场”很重要。首先,如果没有完成,则“位置”需要值“静态”,但这是无法指定的值。请记住,有一个值不能用“位置”来完成的值。换句话说,除非有一个特殊原因,否则它需要一个“静态”以外的价值。

没有位置规范 区别
位置规范无效 静止的
位置已启用 相对安排 相对的
绝对安排 绝对
固定的

价值特征

理解“位置”的原因是一个不同的价值,如果您没有准确地识别每个值的特征,则不会是您的行为。因此,“相对”和“绝对”是经常使用的属性,所以如果您无法完成所有情况,请只阅读此处。在这种情况下,在适当的位置,考虑两个“放置类型(相对或绝对)”和“拍摄的距离”。首先,以下是“放置类型”。

特征 描述
静止的 无法指定位置。 顶部,右,底部,左,z-indexg无法使用。当您想要更改位置时,必须是相对的或绝对的。
相对的 元件的位置在当前位置的原点处移动。 不仅是相对的规范,而且同时,顶部,右下方和左侧的值也表示。也就是说,注意该布置是通过值的组合来执行的。
绝对 元件的位置从最近的“相对”(父母和祖先元件)移动。 因为绝对只能指定特定位置,指定顶部,底部,左和右属性以及“Relatvie”。如果未指定相对,则原点是整个页面。
固定的 参考位置始终是浏览器窗口区域(一旦考虑主体元素) 一些元素不是标准。与相对,顶部,底部,左和右属性一样。当您想要修复屏幕上的总是有些东西时使用,例如纳瓦栏或菜单栏。
根据滚动修复元素。 相对,然后固定,直到超过指定的值。位置和重叠顺序的规范也是可能的。

定位属性与位置属性“顶部”“右”“左下”

接下来,“拍摄了多少距离”,但您可以在左侧和右下方和右下方设置距离。

最佳 指定从上方参考位置的距离。
正确的 指定距离右侧的距离为标准。
底部 指定距离较低参考位置的距离。
剩下 指定左侧位置的距离是参考。

以下是从起点指定的值的图像。

例如,当您希望在30px的点处显示元素时,从开头(顶部)到30px到10px,向左(左)到30px,如下所示,请按如下方式写入。

.要素セレクタ {
   position: relative or absolute;
   top: 10px;
   left: 10px;
}

右侧和底部未指定。可以指定这是可以的,但剩下的优先于右下方。基本上,请记住,左右,或顶部和底部不会同时指定。

如何使用位置的值

本节介绍了经常使用的以下元素的基本使用。如果您认为“很多”,请先掌握前两次使用。

  1. 相对的
  2. 绝对
  3. 固定的

相对的

“位置:相对;”将“当前显示位置”作为起点。这是您未设置位置时出现的位置。这是“相对”的作用,以便从那里放置多长时间。

例如,让我们在HTML中写下如下所示。

<div class="container">
    <div class="main-box">
    	<div class="sample-box"></div>
    </div>
</div>

接下来,在CSS中指定以下内容:

.main-box{
    background: #fde8d0;
    width: 300px;
    height: 300px;
}

.sample-box{
    color: #ffffff;
    background: #ee827c;
    text-align: center;
    width: 300px;
    height: 300px;
}

然后它应该如下显示。您可以看到元素显示重叠。

验证验证工具。

同样,“Sample-Box”与父元素的“主框”重叠。

这是一个起点。所以,从这里指定展示位置。在CSS中,我们添加了“位置属性”,如下所示:它是一个安排,分别为顶部和留下50px。

.sample-box{
    position: relative;
    top: 50px;
    left: 50px;

    color: #ffffff;
    background: #ee827c;
    text-align: center;
    width: 300px;
    height: 300px;
}

然后,可以看出从顶部和左的距离被视为起始点的50px。

以这种方式,如果您从元件的显示位置距离,则“相对”是良好的。但事实上它不仅是这种情况。当您想要更灵活地设置展示位置的起点时有多次。那个时候它是“绝对”的转折。

绝对

“绝对”允许您任意设置起点。例如,写下以下HTML:然后,将开始点作为“起点”开始。

<div class="container">
  <div class="starting-point">
     <div class="main-box">
         <div class="sample-box"></div>
     </div>
  </div>
</div>

在这种情况下,CSS写得如下:通过将“相对”设置为“起点”,我们声明了这个“起点”。接下来,为要放置原点的元素设置绝对。这次,Top:50px和左:设置为50px。

.starting-point{
    position: relative;
    width: 300px;
    height: 300px;
    background: #e0ebaf;
}

.sample-box{
    position: absolute;
    top: 50px;
    left: 50px;

    color: #ffffff;
    background: #ee827c;
    text-align: center;
    width: 300px;
    height: 300px;
}

然后,将显示以下显示。显示重叠的元素。

它能够放置在距离“起点”的距离。顺便说一下,这里的重要点是50px设置的值这个时间是从起点的绝对距离。例如,让我们将两个P标签插入代码中,如下所示。如果这很可能下车,就没有意义在放置中使用“绝对”。

<div class="container">
  <div class="starting-point">
     <div class="main-box">
  	<p>これはサンプルです。_1</p>
  	<p>これはサンプルです。_2</p>
  	<div class="sample-box"></div>
     </div>
  </div>
</div>

与Float的设置一样,您可以看到元素正在浮动,并且插入P标签。结果,保持距离。

但是,必须小心。设定距离受“边缘”和“填充”的影响。让我们将“边缘:50px”设置为“示例框”如下。

.sample-box{
    position: absolute;
    top: 50px;
    left: 50px;

    color: #ffffff;
    background: #ee827c;
    text-align: center;
    width: 300px;
    height: 300px;
    margin: 50px;
}

然后,显示显示如下更改。换句话说,根据CSS设置,距离不具有绝对距离。因此,在设计页面时,请考虑它将偏离假设,并小心“边距”或“填充”。

部署更改为内联元素

嗯,以前的解释是关于“绝对”的块元素的部署。如果您决定安排内联的位置?
例如,假设有一个内联的“跨度标记”如下:将其更改为块元素,并考虑以字符为中心的设计,并将此元素从父元素放到向上和向下50px。

<div class="container">
  <div class="starting-point">
     <div class="main-box">
  	<span class="sample-box">POSITION</span>
     </div>
  </div>
</div>

它如下所示:在线元素也不能指定宽度和高度。

这是以“起点”启动,左上方50px以“绝对”移动。

.starting-point{
    position: relative;
    width: 300px;
    height: 300px;
    background: #e0ebaf;
    text-align: center;
}

.sample-box{
    position: absolute;
    top: 50px;
    left: 50px;

    background: #ee827c;
    color: #ffffff;
}

然后,将显示以下显示。您可以看到放置已正确更改。

然而,这个惊人的事实在这里很出色。 “Sample-Box”是一个在线元素,但让我们指定CSS中的高度和宽度。

.sample-box{
    position: absolute;
    top: 50px;
    left: 50px;

    background: #ee827c;
    color: #ffffff;
    width: 300px;
    height: 300px;
}

然后,可以设置无法完成的宽度和高度。换句话说,内联元素也通过设置“位置:绝对”来具有块元素的性质。
在检查行为时应该记住这些意识。

最后,将角色放在块的中心。设置以下属性。 “显示属性”将在另一个机会中讨论。

.sample-box{
    position: absolute;
    top: 50px;
    left: 50px;

    background: #ee827c;
    color: #ffffff;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

然后将字母放在块的中心,如下所示:因此,可以看出即使是联机元素也可以被阻止和改变。

当指向时,使用“绝对”肯定会检查行为,如果您不收集它作为体验,则无法理解它无法理解。小心“边缘”或“填充”设置,块元素和内联元素的行为之间的差异。

固定的

“位置:固定”的特征是设置是没有“相对”,浏览器窗口的顶部没有起源。当您想要从浏览器顶部修复特定元素时,请使用,包括导航栏固定。请设置如下。将元素固定到屏幕顶部。父元素不必指定“相对”。

<div class="container">
  <div class="starting-point">
    <div class="main-box">
      <div class="sample-box">POSITION</div>
    </div>
  </div>
</div>
}

.sample-box{
    position: fixed;
    top: 0px;
    left: 0px;

    background: #ee827c;
    color: #ffffff;
    width: 100%;
    height: 100px;
    text-align: center;
}

然后,它将在顶部显示如下。

最后,我们将解释一个相对较新的“粘性”作为位置功能。如果将“粘性”指定为位置的值,则将滚动到放置位置(例如,顶部:0px;),具有“位置:粘性;”,但是元素是固定的。修复特定广告,方便确保侧边栏等,并且未来的意识也会频繁增加。

指定一个元素如下:指定位置1-5并使每个高度300px易于理解。通过尽可能高的高度,效果应该更容易理解。此外,不需要在父元素中指定“相对”等。

<div class="container">
	<div class="main-box">
		<div class="sample-box-1 block">POSITION_1</div>
		<div class="sample-box-2 block">POSITION_2</div>
		<div class="sample-box-3 block">POSITION_3</div>
		<div class="sample-box-4 block">POSITION_4</div>
		<div class="sample-box-5 block">POSITION_5</div>
	</div>
  </div>
}

.sample-box-1{
  background: #ee827c;
  z-index: 0;
}

.sample-box-2{
  background: #f4b3c2;
  z-index: 100;
}

.sample-box-3{
  background: #83ccd2;
  z-index: 200;
}

.sample-box-4{
  background: #b8d200;
  z-index: 300;
}

.sample-box-5{
  background: #ffd900;
  z-index: 400;
}


.block{
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    color: #ffffff;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

从图像中不明白,但可以看出,每个元素一起滚动到顶部:0px;,然后元素是固定的。

概括

最有用的是理解“位置”是逐一的。有各种参考资料,但没有学习方法可以帮助您移动手,并知道运动和限制。特别是因为使用“相对”和“绝对”很高,首先,您将从这个学习开始并逐步了解其他值。

给这篇文章的人

田中 陽介

越南的企业家和人力资源相关咨询。七年已经过去了日本,但我享受了一个不能在日本完成的驼峰。最近我在铁路上用Ruby制作网络服务。