第八篇 CSS定位

CSS定位

CSS除了内外边距控制元素,还有定位,看到“定位”两个字,同学们应该就能清楚,它能够做什么。

在刚学习的时候,我也经常使用定位,来控制元素的位置,但是初学的同学可能会注意不到定位的一些“内涵”!所以会出现一些明显的错误,也不知道怎么去修正它,那么下面我们就来介绍一下,这个定位究竟怎么用才好呢。

因为是演示,老师的CSS会采用内联、内嵌,比较方便(同学们以后的项目中,一定要采用外联,高效安全)。

定位属性:position

值:relative(相对定位)、absolute(绝对定位)、fixed(固定定位)

我们先来看看相对定位:

HTML:

<div id="div1">我是定位,相对定位</div>

CSS:

#div1{
    position: relative;
    background-color:#dedede;
}

经过前面的几篇学习,或者了解了WEB前端的HTML和CSS,这里的代码就不再解释了,给背景色就是为了方便看出效果。我们给了div的样式,让它变成“相对定位”了,页面上是没有任何效果的,而要它发生“定位”改变,就要再使用两个属性,left和top,学习过盒子的同学,这两个代码的意思应该是明白的。但是我们这里不是写成"margin-left"或者"padding-left",更加不是"position-left",而是单单的给出"left"属性后面再跟值,就可以了。

#div1{
    position: relative;
    background-color:#dedede;
    top:20px;
    left:50px;
}

刷新页面,能够清楚看到效果,这个div距离页面顶部20px,左侧50px。那么还有一个问题,有多少同学注意到了?页面最低端,出现了一个滚动条!那么是为什么呢?

我们并没有给div设置宽度,它是块级元素,所以默认情况下,它的宽度,是占据整个页面的宽度的。我们设置了它的定位为“相对定位”,它的宽度依旧会是页面宽度,你让它距离左侧(left)50px,他移动过去了,但是宽度依旧不变,所以它这一行可以理解为:当前页面宽度(1920px)+50px(left),就大于了页面本身宽度,所以下面就出现了滚动条。这就是相对定位。

相对定位还有一个特性,我们再在id为div1下面加一行代码测试一下:

<div id="div1">我是定位,相对定位</div>
<div id="div2">我不是定位,没有任何属性,看我位置</div>
为了区分,在div1下面添加一个div2,同学在页面上测试代码会发现,它们的位置...是同行的,如果将div1里面的top值20改成50呢,试试效果:
#div1{
    position: relative;
    background-color:#dedede;
    top:50px;
    left:50px;
}
 
这样的话,div1就在div2的下面去了,而且还能完全的看到div2的所有内容。之前的内容只能看到几个字,后面的都被div1挡住了,这里就关系到了层次。
同学们还发现没有,div1的位置改变了,但是div2依旧是基于它夸了行,没有占用div1原本的位置,也没有因为div1移动了top:50px 而往下面走。div2的位置就等于是,就是基于了div1原本的位置下方跨了一次行。
这里就是“相对定位”的特性,它虽然使用了left和top改变了位置,但是它本身占用的位置是不会改变的,其他的元素也不能占用它本身的位置。
我们可以再来试一下相对定位,这个位置是不是真的,别的元素不会占用,那么我们给它设置一个高:
#div1{
    height: 200px;
}
 

在div1里加一个高,那么效果就会发生改变,div2也会跟着往下面走,是因为,它没有“移动”,它的div元素是在div1下面的,就会一直基于div1跨一次行,跟着老师做到这里,有同学疑问,div2的内容又被压着了,怎么看到全部的内容呢?“position”定位,它还有一个属性:z-index 层次,它的值为数字,可以为负数,不需要单位:

#div1{
    z-index: -1;
}

给div1设置了层次为负1,在页面上,不设置z-index的情况下,所有的元素z-index都可以理解为默认0,而设置了postion的会比没有设置position的高,所以div1才会压着div2,而现在div1层次设置成了负数,div2就可以压着它了,其他元素也会压着,这就是层次,立体模型一样。再说一次,只有设置了position的元素,才可以设置z-index,否则无效哦。

绝对定位:

这个定位好用,但是不推荐用,老师学习的时候,几乎全部用它,但那是错误的!!!

绝对定位,它的“内涵”,会使这个元素脱离文本,比如看看这个代码:

HTML:

<div id="div3">我是绝对定位</div>

CSS:

#div3{
    position: absolute;
}

我们能够发现,它不会改变对吧,但是我们写定位,其实也就是希望它的位置发生改变,那么我们再加两行代码:

#div3{
    top:10px;
    left: 10px;
}

在div3里面,我们加上这两行代码,让它发生位移,同学们会看到,它怎么跑到div1和div2上面去了呢?如果说是相对定位,或者说用内外边距,它也应该是在div1和div2下面距离10px,但是这里,它却在最顶端上了。

我们刚刚说到,绝对定位,它会脱离文本,可以理解为,它不在被其他元素影响,而成为一个独立的,只会基于页面最顶端和左侧发生位移。

看到这里,有同学肯定高兴,那用绝对定位多好,全盘用它来改变位置。确实,老师曾经就这样用过,但是老师问问同学们,你的分辨率宽度固定1920px,你让1个10个N个元素成为绝对定位来位移,那么这只是你的电脑而已,那么如果别人的电脑分辨率只有1024px呢?你某一个元素位移1500px,那么人家1024px的电脑看得到吗?有同学说,会跟相对定位一样,下方出现滚动条。让我们来试试:

#div3{
    left: 2000px;
}

将上面的代码,left改成2000px吧,这样测试的更直接,因为同学们基本上用的都是小于等于1920px的分辨率吧!

效果会怎么样呢?确实,出现了滚动条,我们往右侧拉,会看到什么呢?因为它超过了浏览器最大分辨率,所以它的内容变成了垂直显示了。

那么出现这种情况,同学们一定要觉得很严重,因为你想啊,人家的分辨率若比你的小,那内容不都变样了?还有我们再在div3下面加一个div4试试,先将div3的top和left都设置成0px,设置成0的话,它们就会跑到基于页面左上角去了。不设置的话,就会回到原本的位置上去。

我们在div3下面加一个div4:

<div id="div4">普通的div,什么都不设置</div>

同学能看到,div3确确实实跑到了页面的左上角去了对吧,而div4也在div2下面!为什么是在div2下面呢?因为div3设置成了绝对定位,它原本的位置,已经消失了,所以div4能够占用它的位置,这里就能区分相对和绝对的一个区别。然后我们再将div3的left和top取消,记住是取消掉哦,就是删除它这两个属性。

删除后,大家能看到,它回到了它原本的位置(div2的下面),但是问题来了,它和div4重合了。是因为div3成了绝对定位,div4就直接顶替了它的位置,即使div3回来了,它也只是漂浮在页面上的,不会被其他元素影响,也不会影响别的元素。同学们觉得,这样方便管理吗?我们二次开发的时候,难道别人也要跟着你一样,全盘用绝对定位吗?还有之后的“响应式布局”,不同分辨率不同效果,对吗。

那绝对定位不推荐用,要它干嘛?老师也觉得,但是它还有一个非常重要的用处,可以使它不基于浏览器左上角,而是基于它的“父亲元素”,什么是父亲元素呢?又怎么让绝对定位有父亲元素呢,看下面的代码:

HTML:

<div id="div5">
    我是父亲元素,我还是相对定位
    <div id="div5-1">
        我是绝对定位,我是div5的下一代
    </div>
</div>

CSS:

#div5{
    position: relative;
    width: 500px;
    height: 300px;
    background-color: aqua;
}
#div5-1{
    position: absolute;
    left: 20px;
    top:5px;
}

我们去页面测试,同学们能看到,div5-1 这个元素div块,它没有跑到离开div5对吧,更没有跑到页面左上角,是因为它的父亲元素影响到了它,而它的父亲元素,必须设置成相对定位,才能影响它。如果div5不是相对定位,或者没有设置定位,那么div5-1会直接不承认div5是它的老爸,直接离家出走,跟着浏览器的左上角跑,真的哦。

这里的效果,同学们看到没有,老师给div5-1设置的top只有5px,它还跟父亲元素的内容重合了,是因为什么呢?它确实是基于它父亲发生了位移,但是它基于的是,它父亲的左上角,我们可以再加一行代码和改动一下left、top试试:

#div5-1{
    position: absolute;
    left: 0px;
    top:0px;
    background-color: red;
}

给div5-1加一个背景色,容易区分嘛,然后top和left都改成0,可以看出效果,它确确实实是基于父亲元素的左上角对吧!一点问题都没。

这中绝对定位和相对定位搭配的方法,以后也会常用到的。

固定定位:

这个固定定位也就经常用到了!同学们看到,固定,它是固定的。经常用到哪里呢?想是导航栏,你页面不管这么上下滑动,左右滑动,它都不会改变位置,永远在哪里,所以说,它更多用来做导航栏呢!

我们写一段代码玩玩:

HTML:

<div id="div6">我是固定定位</div>
<div style="height:2000px;我高度2000px,是为了测试固定定位</div>

CSS:

#div6{
    position: fixed;
}

仅仅这样的代码,大家能够滑动一下试试,这个div6的内容,是不是你上下滑动,它永远都在那个位置,而且它和绝对定位是一样的,脱离了文本,不和其他元素相互产生影响。我们给它加一个top和left,看看它是否基于页面的左上角呢!

#div6{
    position: fixed;
    top: 0;
    left: 0;
}

测试的同学能够看到很明显的效果,它确实也是基于页面的左上角的!和绝对定位一样。有同学发问,既然是一样,那么它是不是也能够设置绝对定位作为父亲,答案是:不会,它不会承认别人是它的父亲,一样的跑到页面左上角去,同学可以自己测试一下,加深印象!

三个定位都演示完了,还有不懂的同学,请在下方发问。

时间: 2024-10-29 19:11:30

第八篇 CSS定位的相关文章

【Selenium 3+Java自动化(4)】-八种元素定位

1 package com.mypro.jase; 2 3 import org.openqa.selenium.By; 4 import org.openqa.selenium.WebDriver; 5 import org.openqa.selenium.WebElement; 6 7 public class FindElement { 8 WebDriver driver; 9 String url = "http://www.baidu.com"; 10 11 /** 12

Python之路【第十八篇】:Web框架们

Python之路[第十八篇]:Web框架们 Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. 1 2 3 4 pip install bottle easy_install bottle apt-get install python-bottle wget http://bottlepy.org/bottle.py Bottle框架大致可以分为以下部分: 路

【Selenium 3+Java自动化(6)】-CSS定位语法

一.前言 本章节讲解一下CSS定位. CSS定位相对于XPath定位的优点是:css定位更快,语法更简洁. 这一篇css的定位方法,主要是对比上一篇的xpath来的,基本上xpath能完成的,css也可以做到.两篇对比学习,更容易理解. 二.CSS:属性定位 1.通过id属性定位,需要加上标识符"#",如:#kw: element = driver.findElement(By.cssSelector("#kw")); element.sendKeys("

CSS定位:几种类型的position定位的元素

当人们刚接触布局的时候都比较倾向于使用定位的方式.因为定位的概念看起来好像比较容易掌握.表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里.可是定位比你刚看到的时候要稍微复杂一点.对于定位来说,有一些东西会绊倒新手,所以在它成为你的惯用技巧前你需要掌握它们. 一旦你更深入地了解了它是怎么运作的,你就能够做出一些更棒的事情来. CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细

CSS 定位(待续...)

一.CSS 定位和浮动 它们代替了多年来的表格布局. 定位的思想很简单,相对于正常位置.相对于父元素.另一个元素甚至是浏览器窗口的位置. 浮动在 CSS1 中被首次提出.浮动不完全是定位,当然也不是正常的流布局. 二.一切都是框 display 属性设置元素是什么框类型.其属性为 block.inline.none 时,分别表示块级元素.行内元素和不显示(也不占用文档的空间). 三.定位机制 有三种基本的:普通流.绝对定位和浮动. 在下面的小节里,会给你详细讲解相对定位.绝对定位和浮动. 四.定

selenium自动化测试——常见的八种元素定位方法

selenium常用的八种元素定位方法 1.通过 id 定位:find_element_by_id() 2.通过 name 定位:find_element_by_name() 3.通过 tag 定位:find_element_by_tag_name() 4.通过 class 定位:find_element_by_class_name() 5.通过 css 定位:find_element_by_css_selector() 6.通过 link 定位:find_element_by_link_tex

前端总结&#183;基础篇&#183;CSS

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  /* 去除边距 */ul {margin:0;padding-left:0;}  /* 去除边距和左填充 */li {list-style-type:none;}  /* 去除列表的圆点 */a {text-decoration:none;}  /* 去除下划线 */ 2 浏览器前缀 { tran

css定位瞄点透明相关知识

 position 定位属性,检索对象的定位方式: 一.语法: position:static(initial) /absolute/relative/fixed/sticky(粘性定位),unset相当于static 取值: 1.static:默认值,无特殊定位,对象遵循HTML原则, 会忽略left.top.right.bottom和z-index属性: 2.relative :相对定位,是相对于默认位置的偏移定位,通过设置left.top.right.bottom 值可将其移至相对所需位置

CSS定位

一.属性定位(百度首页) 1.通过id定位:(#代表id) driver.find_element_by_css_selector("#kw").send_keys("selenium") 2.通过class定位:(.代表class) driver,find_element_by_css_selector(".s_ipt").send_keys("selenium") 3.通过标签定位:(不推荐) driver.find_el