CSS 定位

最新推荐文章于 2023-06-04 22:58:06 发布
最新推荐文章于 2023-06-04 22:58:06 发布
阅读量166 收藏
点赞数 3
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x_Alan_3/article/details/127350053
版权
本文详细介绍了CSS中的position属性，包括相对定位、绝对定位、固定定位的概念及其应用。绝对定位会脱离文档流，而固定定位在页面滚动时保持位置不变。重叠元素可通过z-index来控制堆叠顺序，决定前后显示。未指定z-index时，元素顺序影响显示。
摘要由CSDN通过智能技术生成

CSS position 属性 

        这个属性定义建立元素布局所用的定位机制，任何元素都可以定位，不过绝对和固定元素会生成一个块级，而不论元素本身是什么类型；

CSS 定位

值 描述
relative 相对定位，相对于原来的位置，不脱离标准文档流
absolute 绝对定位，脱离标准文档流，不保留原本的位置
fixed

固定定位，相对于浏览器窗口进行定位

窗口滚动也不会移动

相对定位

  相对定位元素的定位是相对其正常位置，可以移动的相对定位元素的内容和相互重叠的元素，它    原本所占的空间不会改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            position: relative;
            top: 50px;
            left: 50px;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        .box1{
            width: 200px;
最低0.47元/天 解锁文章
x_Alan_3
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS中关于position的理解
weixin_44698457的博客
03-01 535
absolute 当 position=absolute 时，div按照 block的效果显示出来，脱离了文档流，通过指定left和top属性值来表示出位置。若当前div没有position=relative的父级div时，该div按照body的左上角来表示。即， &lt;div style="width:100px;height:100px; background-color:black; ...
CSS——在css position 定位 中， relative 和 absolute 的关系
qq_43201350的博客
12-05 238
relative：定位是相对于自身位置定位（设置偏移量的时候，会相对于自身所在的位置偏移）。设置了relative的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。最外层容器设置为relative定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。 absolute：定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即html元素定位。设置了absolute的元素脱了了文档流，元素在没有设置宽度的情况下，宽度由元素里面
CSS父元素和子元素都是position:relative定位方式，子元素的位置解析
ksws0319440的博客
01-25 2618
将父元素设置为position:relative，以子元素有无position:relative作为比较。 以下是将父元素设置为position:relative，以子元素有无position:relative的例子： 代码： <div style="position: relative;width: 100px;height: 100px;border: 1px solid red;"> <span>7777777</span> <div
CSS基础学习——定位position
qq_41890177的博客
07-25 242
一、定位 设定元素在文档中的位置。会将标签（元素）转换为块级 二、定位分类 1、static:静态定位 默认值，没有定位，不能设置偏移值(left/top/right/bottom)，占用标准流（文档流） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
style="position:relative;left:-400px
ryb123的专栏
08-09 1013
style="position:relative;left:-400px 这个语句可以相对于他原来的位置向左移动400px；
前端css定位.pdf
07-28
总的来说，CSS定位技术为前端布局提供了强大的控制能力，可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式（标准流、浮动、定位）中的应用，对于前端开发者来说至关重要。在网页布局中，定位通常是在...
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
html+css定位练习
08-05
总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
深入理解CSS定位与层叠
12-13
position：static(静态定位) 当position属性定义为static时，可以将元素定义为静态位置，所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题。所以当没有定义position属性时，并不说明该元素没有...
style中position div定位和嵌套问题
Q_zx1bydcom的专栏
12-02 1258
div层定位时：如果先用absolute,下面使用relative定位，则正确写法是上面div css中使用top left等属性定位位置，下面relative定位使用margin 属性，否则出现问题。
position 和 z-index 终结
shake863
02-26 174
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-eq
CSS布局：position定位
沉梦昂志
06-11 324
定位和浮动区别（重点） float 浮动 浮动元素会脱离文档流，但不会脱离文本流，浮动只有左右浮动 float 元素会浮起来，具有行内块的特点，但只能浮到第二层，表现为并列 position 定位 相对定位会浮起来，但不会脱离文档流和文本流，元素原本的位置会被保留，不会变为行内块 绝对和固定定位会浮起来，脱离文档流和文本流，会变为行内块元素 position 定位元素会浮起来，但会浮到不同层，后定位的元素永远比先定位的元素层级高（未使用没有z-index的情况下），表现为层叠 position 属性
CSS入门篇（position属性 定位）
qq_36519236的博客
03-31 345
CSS前言1.relative（相对定位）1.1作用1.2特点：2.absolute（绝对定位）2.1 作用2.2特点3. fixed（固定定位）3.1作用4.sticky（磁贴/粘性/吸附定位）4.1作用4.2特点5 static（常规/静态/自然定位）5.1作用5.2特性总结 前言 前面我们说过了CSS的浮动和清除浮动的方法。本篇的内容主要讲述position定位。后续还会有JS 的篇章。 开...
CSS属性详解——position:relative
Wod_7的博客
06-04 5829
CSS中的相对定位relative定位是一种定位方式，与绝对定位absolute定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。
定位之——相对定位（relative）与绝对定位（absolute）
weixin_y18485705761的博客
05-24 3346
对于相对定位与绝对定位这是很重要的知识点，前端学的怎样也是看你的定位学的怎样，他影响了你的整个页面的排版与布局，废话不多说让我们来看看相对定位和绝对定位吧。position 属性规定元素的定位类型。
定位position
qq_36582776的博客
03-08 113
1.静态定位 static 2.相对定位 relative： 相对于原本位置进行定位，top、bottom、left、right的偏移位置是相对于父元素来说的 元素原本的位置依然存在，不会影响其他元素的位置，只是将元素层次提升，即不脱离文档流，也不改变元素的内联、块的性质 3.绝对定位 absolute： 相对于最近定位的祖先元素，如果没有就相对于浏览器窗口。 会提升层次，会脱离文档流 会改变元素性质：内联->块 (宽度100%需要注意) 4.固定定位 fixed (特殊的决对定位)
请教CSS中的position:relative;的作用
u010227447的专栏
06-07 8984
对于position的其它几个属性，我都搞懂了  引用 static : 　无特殊定位，对象遵循HTML定位规则  absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框  relative : 　对象不可层叠，但将依据left，right，top，
style中position的属性值详解
热门推荐
程驰天下的专栏
12-01 3万+
　　　　Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中，Position发挥着非常重要的作用，很多容器的定位是用Position来完成。　　Position属性有四个可选值，它们分别是：static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法，在学习中我们应该去思考在什么布局情况下，应该使用它们其中的哪一种。　　更多关于Pos
playwright css 定位
最新发布
07-19
Playwright是一个Node.js库，用于自动化浏览器操作，包括网页爬取、测试和性能分析。对于CSS定位，它本身并不直接提供对CSS定位语法的支持，如`position`, `left`, `top`, `relative`, `absolute`, 或者`fixed`等。然而，当你通过Playwright控制浏览器元素（例如通过`page.$`或`page.selectElement`获取到一个DOM元素）后，你可以间接地影响其样式，包括位置。 例如，如果你想移动一个元素，你可以先找到该元素，然后设置它的CSS属性，比如： ```javascript const element = await page.$('#myElement'); await element.style.setProperty('position', 'absolute'); // 设置定位模式 await element.style.left = '50px'; // 设置左边距 await element.style.top = '100px'; // 设置上边距 ``` 这里，我们设置了元素的位置属性，使其相对于文档流定位。请注意，实际操作可能需要配合页面渲染完成，如果元素还在加载过程中，你需要等待元素准备好。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值