CSS基础学习--14 Position(定位)

这篇具有很好参考价值的文章主要介绍了CSS基础学习--14 Position(定位)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、定义

position属性指定了元素的定位类型

 position 属性的五个值:

  • static
  • relative
  • fixed
  • absolute
  • sticky

元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

二、static 定位

HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

 静态定位的元素不会受到 top, bottom, left, right影响。

<style>
div.static {
    position: static;
    border: 3px solid #73AD21;
}
</style>

CSS基础学习--14 Position(定位) 使用 position: static; 定位的元素,无特殊定位,遵循正常的文档流对象

三、fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动文章来源地址https://www.toymoban.com/news/detail-488811.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础知识-定位position</title> 
<style>
p.pos_fixed
{
	position:fixed;
	top:30px;
	right:5px;
}
</style>
</head>
<body>

<p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p&

到了这里,关于CSS基础学习--14 Position(定位)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS:深入理解粘性定位 position: sticky

    粘性定位可以被认为是相对定位(relative)和固定定位(fixed)的混合。元素在跨越特定阈值前为相对定位(此时设定的 top, right, bottom、left 阈值并不生效),之后为固定定位。粘性定位元素并未脱离文档流。 相对它的最近滚动祖先和 containing block(最近块级祖先 nearest bloc

    2024年02月11日
    浏览(34)
  • css position属性与js滚动

     “视口”就是浏览器窗口中实际显示文档内容的区域,不包含浏览器的“外框”,如菜单、工具条和标签。文档则是指整个网页。 static 正常定位,是元素position属性的默认值,元素遵循常规流。 relative 相对定位,会相对于自身在常规流中的位置进行定位。其在常规流中的位

    2024年02月08日
    浏览(30)
  • CSS中position: fixed定位后div中内容不能滚动

    问题描述 div 设置定位后,内容不能滚动。 解决方案

    2024年02月06日
    浏览(32)
  • 【CSS 08】display 控制布局 块级元素 行内元素 隐藏元素 结合JS 最大宽度 浏览器窗口 定位 position z-index 堆叠

    说在前面 CSS基础教程系列已经结束,接下来就是中级教程,让我们跟上脚步,继续努力吧! 并且最近临近期末考试,后面十天休刊… display display 属性是用于控制布局的最重要的 CSS 属性 display 属性规定是否/如何显示元素 隐藏元素 - display:none 还是 visibility:hidden 通过将 disp

    2024年02月08日
    浏览(57)
  • 元素定位position

    static:静态定位(默认)。依据文档流定位。 relative:相对定位。以自身为基准,设置坐标(left、top、right、bottom),不脱离文档流。 absolute:绝对定位。以父元素为基准,设置坐标(left、top、right、bottom),脱离文档流。 fixed:固定定位。以浏览器窗口为基准,设置坐标(

    2024年02月05日
    浏览(33)
  • 5-web前端 定位position

    1、相对定位 position: relative  特点:  不脱标,占用自己原来位置      显示模式特点保持不变      设置边偏移则相对自己原来位置移动 拓展:很少单独使用相对定位,一般是与其他定位方式配合使用    参考自身原位置 2、绝对定位 position: absolute 使用场景:子级

    2024年02月08日
    浏览(33)
  • float浮动布局大战position定位布局

    1.普通文档流布局:我们得网页内容从上往下,从左往右进行的布局,其中块元素独占一行(我们可以使用margin,padding,display,line-height去进行布局) 2.浮动布局:浮动可以使用一个元素脱离自己原本的位置,并在父级元素的内容区中向左或向右移动,直到碰到父级元素内容

    2024年02月09日
    浏览(38)
  • 关于position:fixed定位的位置不对的问题(即没有按照浏览器的窗口进行定位)

    问题: 今天在开发过程中发现元素使用 position: fixed 时位置有问题,位置跟我写的位置对不上,后面在 MDN 上面找到了答案,下面是关于 position: fixed 的描述: fixed: 元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元

    2024年02月15日
    浏览(43)
  • 【原生小程序小程序开发中,块内容使用position绝对定位之后 不显示】

    原来写法 解决:在map外面包一层以及整体在外面包一层+定位修改为static+z-index

    2024年03月10日
    浏览(48)
  • CSS Position与Float:探索布局的灵活性

    在网页设计中,我们常常需要对元素进行布局,并使其相互排列或定位。CSS提供了多种方式来实现这些目标,其中包括 position 和 float 属性。本文将深入讲解这两个属性以及它们在布局中的应用。 相对定位(Relative) 相对定位通过设置 position: relative; 属性来移动元素相对于其

    2024年02月10日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包