开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

用css定位三个div

在CSS中，可以使用不同的定位方法来定位三个div。以下是一些常见的定位方法：

静态定位（static）：这是默认的定位方法，它会按照元素在HTML文档中的顺序排列，不受CSS定位的影响。
相对定位（relative）：相对定位会使元素相对于其正常位置进行定位。可以使用top、right、bottom和left属性来调整元素的位置。
绝对定位（absolute）：绝对定位会使元素相对于其最近的定位祖先元素进行定位。如果没有定位祖先元素，则相对于<html>元素进行定位。可以使用top、right、bottom和left属性来调整元素的位置。
固定定位（fixed）：固定定位会使元素相对于浏览器窗口进行定位。可以使用top、right、bottom和left属性来调整元素的位置。
粘性定位（sticky）：粘性定位会使元素在滚动到某个位置时变为相对定位，并在滚动回到该位置时恢复为粘性定位。可以使用top、right、bottom和left属性来调整元素的位置。

以下是一个使用CSS定位三个div的示例代码：

.div1 {
  position: relative;
  top: 20px;
  left: 50px;
}

.div2 {
  position: absolute;
  top: 50px;
  left: 100px;
}

.div3 {
  position: fixed;
  top: 80px;
  right: 50px;
}

在这个示例中，div1使用相对定位，相对于其正常位置向下和向右移动20px和50px；div2使用绝对定位，相对于其最近的定位祖先元素向下和向右移动50px和100px；div3使用固定定位，相对于浏览器窗口向下和向右移动80px和50px。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

selenium之css定位小结

大部分人在使用selenium定位元素时，用的是xpath定位，因为xpath基本能解决定位的需求。css定位往往被忽略掉了，其实css定位也有它的价值，css定位更快，语法更简洁。

02

一篇文章带你了解css z-index(重叠顺序)

div层、span层等html标签层重叠顺序样式z-index，平时CSS使用较少，但也会难免会碰到CSS z-index使用。

03

前端零基础教学开始第六天 06 – day 多种定位方法和精灵图使用元素的显示与隐藏…[通俗易懂]

2、父元素要有定位 —- 父元素在标准六中的位置 + 边偏移属性来设置元素的位置

02

前端基础——CSS+DIV布局

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/details/40559403

01

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )

标签作为父盒子 , 其中容纳三个链接标签 , 每个链接标签中包含一个标签 ;

04

CSS定位之position详解

position属性在前端中，position是很常见的属性。通过这个属性可以调整dom元素在浏览器中显示的位置。它有几个常用的属性： static 默认值。通常是在覆盖absolute或者relative样式时使用。 relative 相对定位。相对于原本自己的位置，其他的元素样式不会发生改变。 position 绝对定位。相对于最近的一个应用absolute或者relative的父元素，然后相对这个元素进行定位。 fixed 相对浏览器定位。 inherit 继承父样式。其中relative、po

06

圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例

题目要求：针对如下DOM结构，编写CSS，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main处在中间，宽度自适应。要求：允许增加额外的DOM节点，但不能修改现有节点顺序。

02

selenium元素定位

一、selenium元素定位 🐱‍🏍🐱‍👤🐱‍👓🏍🐱‍🚀总结一下元素定位方式，因为项目中会用到，爬虫也会用到，也是为了方便自己和方便后续的同事，总结一下。😄🤞😊😘 1.id定位 from selenium import webdriver from selenium.webdriver.common.by import By # 单个查找 find_element_by_id(locator) find_element(By.ID, locator) # 多个查找 find_elements_by_

02

CSS中背景图片定位方法

上面这三句语句，都将图片定位在背景的左上角，表面上看效果是一样的，实际上第三种定位机制与前两种完全不同。

01

【CSS3】 float浮动与position定位常见问题（个人笔记）

[前端CSS高频面试题]如何画0.5px的边框线（详解） CSS3基础属性大全 CSS3动画属性 animation详解（看完就会） CSS3 transform 2D转换之移动旋转缩放（详细讲解看完就会） CSS3 Z—Index 详解 CSS3 positon定位详解（通俗易懂）

04

【融职培训】Web前端学习第2章网页重构9 css定位

在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:

01

Web前端学习第2章网页重构9 css定位

在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:

03

CSS3 属性选择器伪类选择器盒模型圆角阴影 CSS定位和浮动

HTML是网页的裸框架，但是现在已经是2020年了，你再做出一个80年代的网页来，恐怕是没HR要你了。所以学习CSS的重要性可想而知，CSS用途很广，是一门独立的编程语言，能美化网页，也能进一步提高自己的审美level。

02

网页布局基础

1、CSS的三种定位机制 CSS 规定的定位机制有三种，分别是：标准文档流（Normal flow）：特点：从上到下，从左到右，输出文档内容。由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点：在同一行内显示，不会改变HTML文档结构）组成。浮动（Floats）绝对定位（Absolute positioning）言下之意就是网页布局和元素的定位都离不开这三种机制。 2、什么是W3C标准 W3C标准，是由万维网联盟制定的一系列标准，

02

html练习（5）

元素框偏离自身流相应的位置（靠left和top定位），元素仍然保持为定位前的形状，它原本所占的空间仍保留。从这一角度看，好像该元素仍然在文档流/标准流中一样。

02

CSS基础知识

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。

02

CSS StickyFooter——当内容不足一屏时footer紧贴底部

一般来说我们的footer是跟着内容走的，所以当内容较少不足一屏的时候，footer也会跟着内容往上走，导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况，因为比较难

07

CSS基础知识

1.认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。如下列代码： p{

03

八种创建等高列布局【出自w3c】

高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。

04

Grid布局简介

没错，这其实就是我们小时候写的小格子本本，其实它跟我们今天要讲的主题Grid布局非常类似，其实Grid布局就是它的升级加强版。

08

CSS StickyFooter——当内容不足一屏时footer紧贴底部

一般来说我们的footer是跟着内容走的，所以当内容较少不足一屏的时候，footer也会跟着内容往上走，导致下面一段空白。所以这里我们来探讨下当内容不足一屏时footer也要紧贴底部的情况，因为比较难以描述，所以干脆使用了英文标题，要实现的效果如下：

01

HTML+CSS提升小实战

本文介绍了CSS的基础知识，包括CSS盒模型、选择器、常用属性以及深入解析了CSS的布局、响应式设计等。通过本文的学习，读者可以掌握CSS的语法和基本使用方法，能够编写出符合Web标准的网页。

08

web前端面试中10个关于css高频面试题,你都会吗?

BFC(Block Formatting Context)，块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

02

【移动端网页布局】流式布局案例 ⑤ ( 连续排列的链接图片 | 设置盒子圆角 | 超出部分隐藏 | 设置浮动布局 | 精确计算浮动元素宽度避免换行 | 设置图片宽度自适应 )

将布局中的三个链接图片 , 放置在单独的

标签中 , 每个

标签中放置一个链接标签 , 在链接标签中包裹一个图片 ;

02

第五节关于浮动和清除浮动的解说，以及两个大坑不要踩

1.随便唠叨几句这一节课我会对浮动元素和怎样清除浮动相关的技术进行一个讲解，同时，我会列举一些我们前端开发中常见的坑，希望大家以后不要在这些地方犯错。在开始今天的课程之前，有一个东西我需要先讲一下，学网页，我认为最最重要的就是学布局，如果一个网页，你不去布局，学再多的div加css也无济于事，你就算学了再多的特效，又能怎么样？那么，何为布局呢？很简单，就是一句话，把元素放在你想要放的地方，这个就是布局了。对于一些后台管理系统，其实最最常见的还是table布局，包括现在很流行的前端框架 - easyui，

07

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

04

CSS进阶04-块格式化上下文BFC

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。）

03

HTML5+CSS3+JavaScript从入门到精通-10

HTML5+CSS3+JavaScript从入门到精通作者：王征，李晓波第十章 CSS盒子模型和布局案例 10-01 content内容 <!DOCTYPE html>

02

CSS简单入门

最近视频看的差不多了，就是一直没总结，这几天在上班之余，偷偷地总结吧，毕竟一些大牛已经快起飞了。

04

每天10个前端小知识【Day 13】

CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。

01

一文带你弄懂 CSS 布局知识

最近想着学习点前端知识，于是就学习了关于 Web 前端的布局知识，其实就是 CSS 那些事。关于 CSS 其实很早就接触过了，但一直没有沉下心来去学习，所以对于 CSS 布局的东西一直都不成体系。这次趁着重学前端，真正花时间学了一下 CSS 布局的知识点，顺带把知识点总结一下。

03

5分钟学习css网格

您将在本文中,简单了解到如何使用网格布局,一种布局有多种实现方式,曾今对于使用老的弹性盒模型(display:box)以及新的flex(display:flex)布局用过的话,对于css Grid网格布局又是一个新的玩意,它相比于前两者,非常的强大,我也是个初学者,如果译文有误导的地方,请路过的老师多提意见和指正,如果你想阅读英文原文,扫文末下方的二维码,或者跳转到指定的链接就可以了的

02

实例详解：Flex布局（二）

在之前的一篇文章：详解CSS的Flex布局中介绍了CSS的Flex布局的基本知识，包括flex-container的6个属性，以及flex-item的6个属性。同时也提到过，通过使用Flex布局，可以很优雅地解决很多CSS布局问题。本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。

css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

我们在设计网页时，会大量的运用到水平垂直居中，如果知道元素的宽高，那水平垂直居中是很简单的，无非是用一下margin就可以完成，这里就不向大家做过多的解释了。但是，如果不知道元素的宽高呢？是不是就会在这上面用点心思了，接下来我给大家介绍两种我设计网页时常用的两种不定宽高的元素水平居中方法吧，放心绝对容易记。

01

web自动化测试入门篇06 —— 元素定位进阶技巧

web自动化测试作为软件自动化测试领域中绕不过去的一个“香饽饽”，通常都会作为广大测试从业者的首选学习对象，相较于C/S架构的自动化来说，B/S有着其无法忽视的诸多优势，从行业发展趋、研发模式特点、测试工具支持，其整体的完整生态已经远远超过了C/S架构方面的测试价值。

04

面试必备 css面试必考点

CSS 并不是面试重点考察的领域，但如果能在 CSS 领域有自己的见解和经验，会使自己更加脱颖而出。

01

CSS样式

ID选择器：针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义

03

CSS

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

01

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

01

翻译：如何使用CSS实现多行文本的省略号显示

本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动，并添加译者的一些感想，请各位读者谅解。合理的截断多行文本是件不容易的事情，我们通常采用几种方法解决： overflow: hidden直接隐藏多余的文本 text-overflow: ellipsis只适用于单行文本的处理各种比较脆弱的javascript实现。之所以说这种实现比较脆弱是由于需要文本长度的变化时刻得到回流（relayout）后的布

06

前端秘法进阶----css中那些不能说的秘密

层叠冲突这一步完成后，解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。

01

Selenium系列（十三） - 自动化必备知识之Xpath的详细使用

https://www.cnblogs.com/poloyy/category/1680176.html

03

【前端基础面试题】如何用CSS画一个三角形（详解）

加粗边框，设置一个宽高为0的中心点，通过对角线划分的切割法，就得到了四个三角形，然后三个透明就可以得到一个三角形。

02

CSS 之选择器

选择器类型选择器也叫做元素选择器和简单选择器，可以根据元素标签指定样式。 p { color:red; } 类选择器一般用于某些同类型的样式。 .xxxClass{ }

ID选择器为特殊的元素，指定类型 #xxxId{ }

后代选择器在某个选择器后，选择指定规则的后代，为其指定样式 div p { } 伪类选择器为某些特殊的元素，在某些条件时，指定样式。比如，链接的link和visi

09

1.HtmlAgilityPack 爬取优酷电影名

爬虫的制作主要分为三个方面 1、加载网页结构 2、解析网页结构，转变为符合需求的数据实体 3、保存数据实体（数据库，文本等）

02

CSS进阶12-网格布局 Grid Layout

（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！）（注2：更多内容请查看我的目录。）

02

你可能不是那么了解的 CSS Background

Background，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，背景嘛。MDN 中对其的定义如下：

02

CSS、CSS3知识点清单

4、背景 /设置背景图片此处是网络路径，引用网络上面的图片/ background-image: url(“http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg”);

03

CSS实现图片悬停文字叠加效果

在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。

02

CSS实现图片悬停文字叠加效果

在这篇文章中，我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程，你必须具备充分的 HTML 和 CSS 基本知识。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭