css学习之定位

最新推荐文章于 2023-07-26 08:43:28 发布
最新推荐文章于 2023-07-26 08:43:28 发布
阅读量347 收藏
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JCY1009015337/article/details/53488847
版权

1、css定位

2、定位机制：

普通流：元素按照其在HTML中的位置顺序决定排布的过程

浮动

绝对布局

3、css定位属性

position：static relative absolute fixed

（1）position设置为static

static属性表示被修饰的div在父容器内按照普通流布局，left，right等设置属性值不会生效。

示例：


代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        #position1{
            width:100px;
            height:100px;
            background-color: #25ff32;
            position: static;
            left: 20px;
            top:20px;
            border: 1px solid blue;
        }
        #position2{
            width:100px;
            height:100px;
            background-color: #2016ff;
            position: static;
            left: 10px;
            top:10px;
            border:1px solid green;
        }
        #body{
            margin-left: 200px;
            margin-top: 200px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div id="body">
    <div id="position1">

    </div>
    <div id="position2">

    </div>
</div>
    <script>
        for(var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>

（2）position设置为relative时

相对定位是指相对于元素本身应该的位置（针对于父容器而言的）而发生的偏移量。

示例：


代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        *{
            margin:0px;
        }
        #position1{
            width:100px;
            height:100px;
            /*background-color: #25ff32;*/
            position: relative;
            border: 1px solid blue;
            left:10px;
            top:10px;
        }
        #position2{
            width:100px;
            height:100px;
            /*background-color: #2016ff;*/
            position: relative;
            border:1px solid green;
            left:20px;
            top:20px;
        }
        #position3{
            width:100px;
            height:100px;
            /*background-color: #2016ff;*/
            position: relative;
            border:1px solid #17ff26;
        }
        #body{
            margin: 100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div id="body">
    <div id="position1">

    </div>
    <div id="position2">

    </div>
    <div id="position3">

    </div>

</div>

    <script>
        for(var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>
（3）position设置为absolute

absolute表示元素浮动在页面上，位置偏移量完全取决于left和top等的设置

效果图：


代码部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        *{
            margin:0px;
        }
        #position1{
            width:100px;
            height:100px;
            /*background-color: #25ff32;*/
            position: absolute;
            border: 1px solid blue;
            left:10px;
            top:10px;
        }
        #position2{
            width:100px;
            height:100px;
            /*background-color: #2016ff;*/
            position: absolute;
            border:1px solid green;
            left:20px;
            top:20px;
        }
        #position3{
            width:100px;
            height:100px;
            /*background-color: #2016ff;*/
            position: absolute;
            left: 30px;
            top: 30px;
            border:1px solid #17ff26;
        }
        #body{
            margin: 100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="position1">

    </div>
    <div id="position2">

    </div>
    <div id="position3">

    </div>


    <script>
        for(var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>

（4）position设置为fixed时

position为fixed时，页面浮动在页面上，且是固定浮动在页面上，不随滚动条的滚动而滚动。

效果图：


代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
        *{
            margin:0px;
        }
        #position1{
            width:100px;
            height:100px;
            /*background-color: #25ff32;*/
            position: fixed;
            border: 1px solid blue;
            left:10px;
            top:10px;
        }
        #position2{
            width:100px;
            height:100px;
            /*background-color: #2016ff;*/
            position: fixed;
            border:1px solid green;
            left:20px;
            top:20px;
        }
        #position3{
            width:100px;
            height:100px;
            /*background-color: #2016ff;*/
            position: fixed;
            left: 30px;
            top: 30px;
            border:1px solid #17ff26;
        }
    </style>
</head>
<body>
    <div id="position1">

    </div>
    <div id="position2">

    </div>
    <div id="position3">

    </div>


    <script>
        for(var i=0;i<100;i++){
            document.write(i+"<br/>")
        }
    </script>
</body>
</html>

Henry_Jing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS学习之五 定位布局
12-03
一、定位属性的基本情况 使用position属性对元素进行定位： position属性 值：static | absolute | fixed | relative 初始值：static运用范围：所有元素继承值：无计算值：根据指定确定 static：元素框正常生成。...
CSS属性之定位
qq_41583484的博客
02-23 913
CSS属性之定位 定位（position）作为CSS中使用频率较高的几大类属性之一，在页面布局，排版，页面功能化方面起着不可或缺的作用，其作为CSS基础中的一个较难点，成为了很多前端入门者学习的困扰，接下来我们来聊聊CSS中定位的那些事。 顾名思义，浮动强调悬浮，定位强调位置，定位的关键点在于其位置以及参照物的选取。 定位有以下几种常用属性：relative（相对），absolute（绝对），fi...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 29万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
CSS五种定位方式详解
wshwsh_的博客
07-26 2185
position 属性规定应用于元素的定位方法的类型。
CSS学习-DAY03-定位
qq_63014909的博客
07-14 943
定位学习。
css布局和定位
二师弟的博客
03-12 869
参考优秀的 CSS 布局和设计可以帮助我们学习和了解 CSS 的最佳实践，提高自己的 CSS 技能和设计水平
CSS学习
rain_czy02的博客
06-11 1768
属性描述了元素的背景图像，实际开发常见于logo或者一些装饰性的小图片或者超大的背景图片，优点是非常便于控制位置（精灵图的一种运用常景）是一个相对单位，就是当前元素（font-size）1个字体的大小，如果当前元素没有设置大小，则会按照父元素的1个字体大小。rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。复合属性，有严格的顺序，不能随意更换顺序，不需要设置的属性可以省略（取默认值，但必须保留。
CSS学习日记：定位
m0_56424512的博客
11-28 519
css学习笔记
HTML+CSS学习总结
weixin_53351919的博客
06-26 2640
html+css学习总结
前端学习之CSS
weixin_44362089的博客
10-20 2693
前段端学习之CSS,层叠样式表，HTML，三种方式
Selenium使用CSS定位 总结
HONGTester的博客
11-19 1029
Selenium使用CSS定位总结，包括CSS定位和Xpath定位的区别
CSS基础学习之定位—流定位 浮动定位 相对定位 绝对定位 固定定位 粘性定位
01-08
CSS基础声明定位定位简介流定位浮动定位相对定位绝对定位固定定位粘性定位堆叠顺序定位属性总结 定位 定位简介 定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的...
css定位学习小结.md
02-24
*定位分为静态定位，绝对定位，相对定位，固定定位，粘性定位* （1）static 静态定位： position的默认值，默认文本流的状态。 不会识别left right top bottom指定的坐标 （2）absolute 绝对定位: a : ...
HTML+css基础入门学习教程之CSS 相对定位
01-20
CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 如果将 top 设置为 20px，...
overflow:hidden用法
henry的博客
06-16 9320
最近学习css的overflow元素的hidden属性，总结2点作用： 1、当父元素设置了height值时，则设置overflow:hidden后，子元素超出父元素部分隐藏 2、当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。 作用1示例: <!DOCTYPE html> &lt...
HTMl与CSS简单页面页面效果实例
henry的博客
12-12 7516
效果图如下： HTML和CSS代码： html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .div{ position: relative; margin-l
css学习之边框样式、外边距合并
henry的博客
12-06 1557
边框的样式： border-style：定义了10个不同的非继承样式，包括none 边框的单边框样式： border-top-style border-left-style border-right-style border-bottom-style 边框的宽度： border-width 单边框： border-top-width border-
浮动布局实现瀑布流
henry的博客
12-06 1553
效果图： 示例代码： html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> *{ margin: 0; padding: 0px; }
浅析div的浮动
henry的博客
12-12 995
由于在学习HTML元素浮动的时候，总是拎不清，比如什么时候需要浮动，什么时候需要清除浮动，左右浮动后，下一个元素显示在哪里，下下个元素显示在哪里等问题。而div的浮动布局问题在页面设计又是比较重要的，现自己学习总结了一下，供大家学习交流。 首先初始我们定义了6个div，它们的class是这样的，div、div1、div2、div3、div4、div5，它们的高度是一样的。都是200px。 接下
pytest元素定位css
最新发布
09-14
在使用 pytest 进行元素定位时，可以使用 CSS 选择器来定位元素。下面是一个示例： ```python from selenium import webdriver def test_element_locate(): # 初始化浏览器驱动 driver = webdriver.Firefox() # 打开网页 driver.get('https://www.example.com') # 使用 CSS 选择器定位元素 element = driver.find_element_by_css_selector('#myElement') # 对元素进行操作 element.click() # 关闭浏览器驱动 driver.quit() ``` 在上面的示例中，`driver.find_element_by_css_selector()` 方法可以通过 CSS 选择器来定位元素。在这个例子中，我们使用了 `#myElement` 作为选择器，它将匹配具有 `id="myElement"` 的元素。 你可以根据需要修改选择器来定位不同的元素。如果你对 CSS 选择器不太熟悉，可以参考 CSS 选择器的文档进行学习。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Henry_Jing

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值