理论:css的position属性设置了要应用到元素的定位类型.(static,absolute,fixed,relative)
1.static
默认值,指定根据文档内容的正常流动对元素定位。(从左至右,从上至下)
静态定位元素不是DHTML元素,不能用top,left等属性定位。要对文档元素定位,必须要把它的position属性设置为其他三个值之一。
2.absolute:
用这个值可以设置元素相对于它包含元素的位置。绝对定位的元素将独立于其他元素定位,但不属于静态定位的元素流。
绝对定位元素可以相对body定位,如果它嵌套在另一个绝对定位的元素中,则相对于那个元素定位。
3.fixed
用这个值可以设置元素在浏览器窗口中的位置。具有fixed定位的元素总是可见的,并且不随文档其余的元素滚动。
固定定位得到大多数浏览器的支持。IE6除外
4.relative
被设置为relative的元素将,根据常规流布置元素,然后相对于它在常规流中的位置进行调整。在常规文档流中分配的位置仍然分配给它,它两边的元素不会向它靠近来填充它的位置,但它们也不会从元素的新位置被挤走。
分享到:
相关推荐
4. **定位和布局**:CSS的定位机制(如绝对定位、相对定位)使得元素能在页面上自由移动,实现灵活的布局设计。 5. **层(Layers)**:DHTML引入了层的概念,允许在页面上创建独立的可移动、可调整大小的区域,增强...
5. **定位与布局**:浮动、绝对定位、相对定位等方法,以及盒模型的理解,是CSS布局的基础。 接下来,DHTML是HTML的扩展,结合CSS、JavaScript和DOM(Document Object Model)来实现动态网页效果。DHTML的关键点...
3. **定位机制**:通过position属性(static、relative、absolute、fixed),可以实现元素的相对定位、绝对定位和固定定位,提升了页面布局的灵活性。 4. **多列布局**:CSS2.0开始支持多列布局,允许开发者创建...
2. **CSS样式**:DHTML手册会详细介绍如何使用CSS来控制网页布局和外观,包括定位、层叠、动画效果等。 3. **DOM操作**:DOM是HTML文档的结构化表示,手册会教授如何使用JavaScript来查找、修改和添加DOM元素,实现...
3. **定位机制**:相对定位、绝对定位和固定定位,以及z-index的概念。 4. **层叠和继承**:了解样式如何根据优先级和继承规则应用。 5. **颜色、字体和背景**:颜色模式、透明度、字体家族、行高和背景图像的设置。...
5. **布局技术**:CSS提供了多种布局模式,如流体布局、网格布局(CSS Grid)、Flexbox和Grid的组合,以及绝对定位和相对定位等,帮助开发者构建复杂的页面结构。 **DHTML(动态超文本标记语言)** DHTML是一个...
3. **定位**: 使用`position`属性实现绝对定位、相对定位和固定定位,实现元素在页面上的精确控制。 4. **层叠规则**: CSS的优先级计算,包括继承、内联样式、ID选择器、类选择器等,决定哪个样式生效。 5. **媒体...
6. **定位(Positioning)**:CSS2.0引入了绝对定位(absolute)、相对定位(relative)和固定定位(fixed),让元素可以根据需要自由移动。 7. **浮动(Float)**:浮动元素可以移动到其容器的左或右侧,影响周围...
4. **定位**:CSS提供了相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和静态定位(static)四种方式,用于控制元素在页面上的位置。 5. **层叠与继承**:CSS的层叠机制决定了当多个样式冲突时...
3. **定位**:包括静态定位(static)、相对定位(relative)、绝对定位(absolute)和固定定位(fixed),决定了元素在页面上的位置。 4. **层叠**:CSS的“层叠”意味着多个样式规则可以应用于一个元素,优先级取...
通过CSS,我们可以定义元素的颜色、字体、布局等样式,并且可以实现对元素的定位,如绝对定位和相对定位,这在创建动态效果时非常重要。CSS还可以实现层(layer),使得元素可以独立于文档流浮动,便于实现动画和...
掌握基本的JavaScript语法,如变量、函数、条件语句和循环,以及DOM操作,如`getElementById`、`appendChild`和`innerHTML`等,是制作DHTML网页的关键。 **DOM理解** DOM(Document Object Model)是HTML和XML文档...
在代码段中,`#LBGImage`和`#RegBGImage`是两个使用绝对定位的CSS类。两者都设置了相同的图像作为背景,但使用了不同的属性。`LBGImage`使用`layer-background-image`,图像会覆盖整个边框内的区域,而不仅仅是文本...
5. **定位**:静态、相对、绝对和固定定位。 6. **过渡和动画**:平滑状态变化和创建动态效果。 7. **预处理器**:Sass、Less等,提供变量、嵌套规则等功能,提高CSS可维护性。 **DHTML**(Dynamic HTML)是HTML、...
此外,CSS 2.0还提供了定位(positioning)功能,如绝对定位(absolute)和相对定位(relative),使得元素可以相对于其他元素或窗口进行精确布局。还有浮动(float)属性,常用于创建多列布局。不仅如此,CSS 2.0还支持伪类...
理解CSS选择器、盒模型、相对和绝对单位以及响应式设计原则是掌握CSS2的关键。 在实际应用中,JavaScript、DHTML和CSS通常一起工作,提供丰富的用户体验。例如,JavaScript可以用来改变DOM元素的属性,CSS则负责...
- 浮动与定位:`float`属性用于创建流体布局,`position`属性则用于绝对定位元素,如`relative`、`absolute`、`fixed`。 2. div布局: div元素是HTML中的一个块级元素,常用于组合其他元素,创建页面布局。通过...
5. **定位机制**:CSS 2.0提供了相对定位(relative),绝对定位(absolute),和固定定位(fixed)三种定位方式,让元素能够在页面上自由移动和对齐。 6. **媒体查询**:虽然CSS 2.0尚未引入媒体查询(Media ...
3. **定位机制**:包括静态定位、相对定位、绝对定位和固定定位,这些定位方式允许开发者精确控制元素在页面上的位置。 4. **层叠与继承**:CSS2.0中的层叠规则决定了哪些样式会优先应用,而继承则让子元素能自动...