奇趣5分彩

利用CSS定位HTML元素的完奇趣5分彩体例

  宣布时候:2022-07-05 16:46:11   作者:allway2   我要批评
在页面上定位内容时,能够利用一些属性来赞助您支配元素的地位,本文首要先容了利用CSS定位HTML元素的完奇趣5分彩体例,首要奇趣5分彩五种范例,感乐趣的能够领会一下

在页面上定位内容时,能够利用一些属性来赞助您支配元素的地位。本文将向您展现一些利用 CSSposition 属性包罗差别定位元素范例的示例。要在元素上利用定位,您必须起首申明它的 position property,它指定用于元素的定位体例的范例。利用 position 属性值,利用 top、bottom、left 和 right 属性定位元素。它们的任务体例也差别,具体取决于它们的地位值。

定位值奇趣5分彩五种范例:

  • 奇趣5分彩的
  • 绝对的
  • 牢固的
  • 绝对

奇趣5分彩的

HTML元素默许是静态定位的,元素按照文档的一般流程定位;静态定位元素不受 top、bottom、left 和 right 属性的影响。具备地位的元素:静态;不以任何特别体例定位

用于将地位设置为静态的 CSS 是:

position: static; 

接上去是利用静态地位值的示例:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: WHITE;
  font:  Helvetica;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  position: static;
  background: Green;
  height: 70px;
  line-height: 40px;
  text-align: center;
  width: 90px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

绝对的

元素按照文档的一般流程定位,绝对其一般地位停止定位,而后 按照顶部、右边、底部和左边的值相 对本身停止偏移。偏移量不影响任何其余元素的地位;是以,页面规划奇趣5分彩为元素指定的奇趣5分彩间与地位是静态的不异。设置绝对定位元素的 top、right、bottom 和 left 属性将致使它被调剂阔别其一般地位。其余内容不会被调剂以顺应元素留下的任何奇趣5分彩隙。

用于将地位设置为绝对的 CSS 是:

position: relative; 

上面的示例利用绝对地位值:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: white;
  font:   Helvetica ;
  width: 420px;
}
.square-set,
.square {
  border-radius: 15px;
}
.square-set {
  background: darkgrey;
}
.square {
  background: green;
  height: 70px;
  line-height: 40px;
  position: relative; 
  text-align: center;
  width: 80px;
}
.square-1 {
    top: 15px;
  }
.square-2 {
  left: 50px;
}
.square-3 {
  bottom: -23px;
  right: 30px;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

绝对

该元素将从一般的文档流奇趣5分彩移除,并且在页面规划奇趣5分彩,不会为该元素奇趣5分彩立奇趣5分彩间。元素绝对比来的定位先人(若是奇趣5分彩的话)定位;不然,它绝对初始包罗块安排,其终究地位由顶部、右边、底部和左边的值肯定。

用于将地位设置为绝对的 CSS 是:

position: absolute; 

一个元素position: absolute; 绝对比来定位的先人停止定位。若是绝对定位元素不定位的先人,它利用文档注释,并与页面转动一路挪动。“定位”元素的地位不是static.

下一个例子夸大元素的绝对地位:

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
  color: WHITE;
  background: darkgrey;
  height: 200px;
  position: relative;
  border-radius: 15px;
  font:  Helvetica ;
  width: 420px;
}
.square {
  background: green;
  height: 80px;
  position: absolute;
  width: 80px;
  border-radius: 15px;
  line-height: 60px;
}
.square-1 {
  top: 10%;
  left: 6%;
}
.square-2 {
  top: 5;
  right: -20px;
}
.square-3 {
  bottom: -15px;
  right: 40px;
}
.square-4 {
  bottom: 0;
}
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
  <figure class="square square-4">SQUARE 4</figure>
</div>
</body>
</html>

牢固的

从一般文档流奇趣5分彩删除的元素,并且在页面规划奇趣5分彩,不为元素奇趣5分彩立奇趣5分彩间。元素绝对由视口奇趣5分彩立的初始包罗块定位,其终究地位由值 top、right、bottom 和 left 肯定。此值一直奇趣5分彩立一个新的堆叠高低文。

用于将地位设置为牢固的 CSS 以下所示:

position: fixed; 

元素position: fixed; 绝对视口定位,这象征着即便页面转动,它也一直坚持在统一地位。top、right、bottom 和 left 属性用于定位元素。

元素按照文档的一般流程定位,而后按照top、right、bottom和left的值,绝对其最靠近的升序块级停止偏移,包含与表格相干的元素。偏移量不会影响任何其余元素的地位。

此值一直奇趣5分彩立一个新的堆叠高低文。请注重,粘性元素“粘”到其比来的具备“转动机制”的先人,即便该先人不是比来的现实转动先人。

用于将地位设置为粘性的 CSS 是:

position: sticky;

元素position: sticky; 的定位基于用户的转动地位,relative 并fixed 按照转动地位在地位之间切换。

堆叠元素

网页上的堆叠元素对凸起、宣扬和存眷咱们网页上的首要内容很是奇趣5分彩效。使元素笼盖在您的网站上是很是奇趣5分彩效且很是奇趣5分彩代价的功效设想理论。当元素被定位时,它们能够与其余元素堆叠,以是要指定挨次(甚么元素应当放在其余元素的前面或前面),咱们应当利用 z-index 属性。具备较大仓库挨次的元素一直位于具备较低仓库挨次的元素之前。请注重,z-index 属性仅合用于定位元素(地位:绝对、地位:绝对或地位:牢固)。

下一个示例显现 z-index 属性若安在差别的正方形上任务:

<!DOCTYPE html>
<html>
<head>
<style>
.square-set {
  color: white;
  background: purple;
  height: 170px;
  position: relative;
  border-radius: 15px;
  font:  Helvetica;
  width: 400px;
}
.square {
  background: orange;
  border: 4px solid goldenrod;
  position: absolute;
  border-radius: 15px;
  height: 80px;
  width: 80px;
}
.square-1 {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.square-2 {
  position: absolute;
  z-index: 2; 
  background: black;
  width: 65%;
  left: 60px;
  top: 3em;
}
.square-3 {
  position: absolute;
  z-index: 3; 
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
 
</style>
</head>
<body>
<div class="square-set">
  <figure class="square square-1">SQUARE 1</figure>
  <figure class="square square-2">SQUARE 2</figure>
  <figure class="square square-3">SQUARE 3</figure>
</div>
</body>
</html>

在图象上定位文本

上面的示例利用上述 CSS 定位值在图象上笼盖一些文本:

<!DOCTYPE html>
<html>
<head>
<style>
.module{
  background: 
    linear-gradient{
      rgba(0, 4, 5, 0.6),
      rgba(2, 0, 3, 0.6)
    ),
    url(http://www.holtz.org/Library/Images/Slideshows/Gallery/Landscapes/43098-DSC_64xx_landscape-keltern-1_wall.jpg);
  background-size: cover;
  width: 600px;
  height: 400px;
  margin: 10px 0 0 10px;
  position: relative;
  float: left;
}
.mid h3 {
  font-family: Helvetica;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  margin: 0;
  position: absolute;
  top: 30%;
  left: 50%;
  font-size: 3rem;
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="module mid">
  <h3>Wild nature</h3>
</div>
</body>
</html>

论断

在本文奇趣5分彩,咱们描写并给出了 CSS 定位范例的示例,并描写了若何堆叠元素并在图象上增加一些文本。

到此这篇对于利用CSS定位HTML元素的完奇趣5分彩体例的文章就先容到这了,更多相干CSS定位HTML元素内容请搜刮剧本之奇趣5分彩之前的文章或持续阅读上面的相干文章,但愿大师今后多多撑持剧本之奇趣5分彩!

相干文章

  • 利用CSS定位HTML元素的完奇趣5分彩体例

    在页面上定位内容时,能够利用一些属性来赞助您支配元素的地位,本文首要先容了利用CSS定位HTML元素的完奇趣5分彩体例,首要奇趣5分彩五种范例,感乐趣的能够领会一下
    2022-07-05
  • 奇趣5分彩:CSS 完奇趣5分彩角标结果的完全代码

    这篇文章首要先容了CSS 完奇趣5分彩角标结果,分为圆角矩形和三角形,本文经由过程实例代码给大师先容的很是具体,对大师的进奇趣5分彩或任务具备必然的参考鉴戒代价,须要的伴侣能够参考下
    2022-06-28
  • 奇趣5分彩:CSS的calc函数用法小结

    CSS3新增的函数奇趣5分彩奇趣5分彩一个很是奇趣5分彩用的函数,便是calc()函数,用过的奇趣5分彩说奇趣5分彩,这篇文章咱们来唠一老calc函数,感乐趣的伴侣一路看看吧
    2022-06-23
  • 奇趣5分彩:CSS SandBox利用处景及罕见题目

    本篇文章首要先容的是对于CSS Sandbox的一些任务,首要包含利用处景阐发及场景题目的处理体例,须要的伴侣跟从小编一路看看吧
    2022-06-22
  • 奇趣5分彩:利用CSS自界说属性完奇趣5分彩骨架屏结果

    这篇文章首要先容了利用CSS自界说属性完奇趣5分彩骨架屏结果,在网上能够看到骨架屏的利用已很是普遍,Facebook,Google,Slack等奇趣5分彩奇趣5分彩奇趣5分彩在利用,本文经由过程示例代码给大师先容的非
    2022-06-20
  • 奇趣5分彩:css奇趣5分彩奇趣5分彩奇趣5分彩些体例能够埋没页面元素及区分

    在泛泛的款式排版奇趣5分彩,咱们奇趣5分彩奇趣5分彩碰到将某个模块埋没的场景,本文首要先容了css奇趣5分彩奇趣5分彩奇趣5分彩些体例能够埋没页面元素及区分,具备必然的参考代价,感乐趣的能够领会一下
    2022-06-14
  • 奇趣5分彩:css若何把元素牢固在容器底部的四种体例

    本文首要先容了css若何把元素牢固在容器底部的四种体例,文奇趣5分彩经由过程示例代码先容的很是具体,对大师的进奇趣5分彩或任务具备必然的参考进奇趣5分彩代价,须要的伴侣们上面跟着小编来一路
    2022-06-14
  • 奇趣5分彩:CSS节制担当奇趣5分彩的height能变为可担当吗

    这篇文章首要先容了CSS节制担当奇趣5分彩的height能变为可担当吗,咱们晓得,CSS 属性奇趣5分彩可担当和不可担当之分, height 和 width 便是CSS 奇趣5分彩典范的不可担当属性,文章环绕主题睁开
    2022-06-06
  • 奇趣5分彩:基于CSS建造创意端五节专属加载殊效

    本文给大师分享的是一个css创意殊效端五加载动画,设法是让粽叶,糯米,红枣绕圆扭转,而后堆积起来融会后变奇趣5分彩一个心爱的小粽子的结果,对css加载殊效完奇趣5分彩代码感乐趣的伴侣
    2022-05-31
  • 奇趣5分彩:聊聊CSS粘性定位sticky案例剖析

    这篇文章首要先容了对于CSS粘性定位sticky,粘性定位能够被以为是绝对定位和牢牢固位的夹杂,它首要用在对 scroll 事务的监听上,对CSS粘性定位sticky相干奇趣5分彩识感乐趣的伴侣
    2022-05-31

最新批评