css_position中的4种定位

  position在页面的布局中很常见,其有四个属性,分别为static、fixed、relative、absolute。


position: static;

  相当于没有定位,元素会出现在正常的文档流中。写不写都没关系。

position: fixed;

  元素框的表现类似于absolute,但是fixed是相对于视窗本身,也就是浏览器窗口而定位的。所以,采用该定位的元素在页面下拉的时候,其位置并不会发生变化。

position: relative;

  生成相对定位的元素,相对于元素本身的位置进行定位,它原本所占的空间仍然会保留。

position: absolute;

  生成绝对定位的元素,相对于static定位以外的第一个有定位的祖先元素进行定位。由于static定位相当于没有定位,所以absolute定位实际上就是相对于有定位的第一个祖先元素定位,如果所有的祖先元素都没有定位,则相对于初始包含块或者画布,一般就是body元素定位。

父相对,子绝对。

原文地址:https://www.cnblogs.com/wush-1215/p/10624702.html

时间: 2024-10-12 23:21:46

css_position中的4种定位的相关文章

CSS中的几种定位简介

相对于元素在正常情况下出现在页面文档流的位置,CSS提供了几种方法来定位. 静态定位(static)表示按照正常定位方案,元素盒按照在文档流中出现的顺序依次格式化: 相对定位(relative)将移动元素盒,但是它在文档流中的原始空间会保留下来: 绝对定位(absolute)是指元素盒彻底从文档流中脱离出来,并相对于其容器块进行定位.因为这些元素从文档流中脱离出来,所以它们不再影响周边元素的布局,并且它们占据的空间不被保存: 固定定位(fixed)与绝对定位类似,元素从文档流中脱离,但是它们不是

【转】HTML中的几种定位方式

http://www.cnblogs.com/Jerry-Chou/archive/2011/11/02/2233094.html 1,static(默认) 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方.所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果. 一般来说,我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式.除非你想覆盖从父元素继承来的定位系统. 2,rel

css中的几种控制页面布局的定位机制(相对定位与绝对定位)

  CSS中几种控制页面布局的定位机制 对于web的初学者来说,CSS中的几种定位方式经常让人摸不着头脑,从而达不到想要的页面布局效果,趁有时间就好好总结一下CSS中的几种定位方式,也当自己再巩固一下. CSS中包含三种控制页面布局的定位机制:普通流.相对定位.绝对定位.在CSS中通过position属性表明定位机制.此外还可以使用float属性来让元素浮动 普通流 相应语法(默认) position:static; 所谓的普通流就是根据块级元素以及内联元素自身的属性来进行布局,而不人为的进行控

新接触的多几种定位方式(相对定位、绝对定位、固定地位和浮动)

本周学习了页面布局相关的东西,网页 布局中,几种定位是我们经常用到的一个知识点,现在罗列一下目前接触到的剧中定位 方式以及其具体解释: 1.relative(相对定位) 在static的基础上,让一个元素在他本来的位置做一些位移,可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right).有一点需要注意的是,相对定位的元素没有脱离文档流,仍然占据着他本来占据的位置空间. 2.absolute(绝对定位) 中将一个元素放至指定位置,可以使用absol

Selenium2+python自动化45-18种定位方法(find_elements)【转载】

前言 江湖传言,武林中流传八种定位,其中xpath是宝刀屠龙,css是倚天剑. 除了这八种,其实还有十种定位方法,眼看就快失传了,今天小编让失传已久的定位方法重出江湖! 一.十八种定位方法 前八种是大家都熟悉的,经常会用到的 1.id定位:find_element_by_id(self, id_)2.name定位:find_element_by_name(self, name)3.class定位:find_element_by_class_name(self, name)4.tag定位:find

html中设置锚点定位的几种常见方法(#号定位)

在html中设置锚点定位我知道的有几种方法,在此和大家分享一下: 1.使用id定位: <a href="#1F">锚点1</a> <div id="1F"> <p> 11111111111 </br> 11111111111 </br>11111111111 </br>11111111111 </br>11111111111 </br>11111111111

【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距组成. 2.如果在元素上添加背景,则背景是边框, 内边距和内容组成的区域. 3.在css中width和height指的是内容区域的宽度和高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但会增加元素框的总尺寸.即width=element 注意:ie的盒模型中,width指的是内容,内边距,和边

selenuim中18种定位方式

18种定位方式=8种单数形式+8种复数形式+2种底层方案 单数可以确定唯一,复数无法确定: 单数形式定位,返回的是一个元素,复数形式,返回的是一个列表,返回的是当前页面所有符合要求的元素,没有意义 一.8种单数形式: 1.通过id属性定位,driver.find_element_by_id('i1'),定位之后操作页面上的数据driver.find_element_by_id('i1').send_keys('123123') 2.通过class属性定位,并向该属性写内容 3.通过name属性定

CSS的三种定位方式介绍(转载)

在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式relative相对定位,相对于原来的位置,但是原来的位置仍然保留absolute定位,相对于最近的非标准刘定位,原来的位置消失,被后边的位置所顶替 下面先演示相对定位的案例 [html] view plain copyprint? <!DOCTYPE html> <html> <head> <