`

[position: fixed ] with vertical space

    博客分类:
  • css
阅读更多

Position: fixed with vertical space

What I have is a rather basic issue with position: fixed.

Here's a sample: http://jsfiddle.net/wxEsY/

What I want is the scrolling to start below the black bar (with a fixed position).

Any help appreciated.

Regards


_______________________________________________________________________

Does this do it?

http://jsfiddle.net/Vqncx/

I just gave the 'content' DIV relative positioning and a y-axis from the top equal to the height of the 'nav' and then gave the 'nav' a z-index to keep it on top of the 'content'.



.nav {
 width: 100%;
 height: 50px;
 background: #000;
 position: fixed;
 z-index: 5;
}

.content {
 background: #ccc;
 width: 100%;
 height: 5000px;
 position: relative;
 top:50px;
}






_______________________________________________________________________

Add padding to second div equal to height of second div.

.content {
    padding-top: 50px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}


When you say scrolling below the back bar, it sounds like you want the content to begin below the back bar. So add some padding to second div to account for presence of fixed div.

_______________________________________________________________________









-
分享到:
评论

相关推荐

    三星9305收索

    white-space:nowrap;overflow:hidden}.bdsug .bdsug-direct p img{width:16px;height:16px;margin:7px 6px 9px 0;vertical-align:middle}.bdsug .bdsug-direct p span{margin-left:8px}.bdsug .bdsug-direct p i{...

    FastReport.v4.15 for.Delphi.BCB.Full.Source企业版含ClientServer中文修正版支持D4-XE5

    - fixed bug with truncate of font size combo-box in Windows Vista/7 in designer (lost of vertical scroll bar) - fixed bug when lost file name in inherited report - fixed bug in multi-page report with ...

    基本CSS样式表大全

    - `white-space: nowrap;` 不换行显示文本。 ### 显示模式(Display) 1. **显示模式** (`display`): - `display: block;` 块级元素。 - `display: inline;` 内联元素。 - `display: list-item;` 列表项。 - ...

    CSS样式大全(参考)

    - `white-space: nowrap;` 不换行。 #### 四、显示模式(Display Properties) **1. 显示模式 (Display Mode):** - `display: block;` 作为块级元素显示。 - `display: inline;` 作为内联元素显示。 - `display: ...

    CSS属性大全[归类].pdf

    * white-space: 设置空格方式,包括 pre(保留)、nowrap(不换行) 显示属性 * display: 设置显示方式,包括 block(块)、inline(内嵌)、list-item(列表项)等 * visibility: 设置可见性,包括 inherit、...

    css默写文档

    - 示例:`white-space: nowrap;` - **单词间距**:`word-spacing`属性定义了单词之间的间距。 - 示例:`word-spacing: 2px;` - **字母间距**:`letter-spacing`属性定义了字母之间的间距。 - 示例:`letter-...

    css3学习笔记(新增功能,粗略版本)

    - `white-space: nowrap;` - `overflow: hidden;` - `text-overflow: ellipsis;` #### HTML5 新增的语义化标签 - **`<header>`**:页面或区域的头部。 - **`<nav>`**:包含页面导航链接的部分。 - **`<article>...

    CSS默写标准文档

    - **white-space**: 空白字符处理,如`white-space: nowrap;`保持不换行。 - **line-height**: 行高,如`line-height: 1.5;`。 - **word-spacing**: 单词间距,如`word-spacing: 2px;`。 - **letter-spacing**: 字母...

    css:字体属性参考大全

    - **语法**:`white-space: space;` - **描述**:控制元素中的空白字符如何处理。 - **值**: - `pre`: 保留空白字符 - `nowrap`: 不换行 - `normal`: 正常换行 #### 四、显示属性(Display) 显示属性用于控制...

    CSS,链接样式大全

    - `space`: 平铺但保持间距一致。 - `round`: 平铺但保持图片完整显示。 - **背景固定** (`background-attachment`): 控制背景图像是随着滚动条滚动还是固定不动。 - `fixed`: 固定背景图。 - `scroll`: 随滚动...

    CSS属性解释、说明

    - **示例**:`white-space: nowrap;` **7. `display`**: 元素显示模式。 - **值**:`block`(块级)、`inline`(内联)、`list-item`(列表项)、`run-in`(运行内)、`table`及其子属性等。 - **示例**:`...

    css样式大全精华版.docx

    white-space: nowrap; ``` #### 四、显示属性 (Display Properties) **1. 显示模式** (`display`) - `block`:块级元素 - `inline`:内联元素 - `list-item`:列表项 - `run-in`:追加局部 - `compact`:...

    asp.net 和 css样式大全

    - `white-space: pre;`:保留源文档中的空白字符。 - 可选值包括`nowrap`(不允许换行)及`normal`(自动换行)。 7. **Display Property** - `display: block;`:将元素作为块级元素显示。 - 可选值包括`...

    css属性表与用法

    pre { white-space: pre-wrap; } ``` - **list-style-type**:定义列表项标记的类型。例如: ```css ul { list-style-type: square; } ``` - **list-style-image**:定义列表项标记的图像。例如: ```css ul ...

    html+css基础

    - **示例:** `white-space: nowrap;` **应用场景:** - 常见于代码展示或者特殊布局需求,例如保持源代码的格式不变。 #### `direction` **定义与功能:** - **定义:** 设置文本的方向,即从左至右(LTR)或从右...

    css样式表汇总新手专用

    - `vertical-align`:用于控制元素在行内的垂直对齐方式,如`baseline`(基线对齐)、`sub`(下标)、`super`(上标)等。 6. **词间距**: - `word-spacing`:控制单词之间的距离,`normal`为默认值,也可输入...

    常用的CSS标签标记属性翻译注释

    - **示例**: `pre { white-space: pre; }` **7.3 list-style-type** - **定义与用途**: 设置列表项前面的标记。 - **选项**: - `disc`: 圆点。 - `circle`: 圆圈。 - `square`: 方框。 - `decimal`: 阿拉伯数字...

    网页常用英语命令说明

    white-space: pre; } ``` #### 38. 缩写属性(Shorthand Properties) 缩写属性允许同时设置多个相关的属性值。 - `margin`: 设置四个方向的外边距。 - `padding`: 设置四个方向的内边距。 - `border`: 设置边框...

    最全前端面试题-2(css篇-上百篇题集整理1个月)

    【CSS英文、中文换行】:英文单词换行使用`word-wrap: break-word`,中文强制换行用`white-space: pre-wrap`。 【CSS选择器级别】:根据选择器类型计算权重,权重高的优先应用。 【BFC(块格式化上下文)】:BFC是...

    样式表总结

    - `white-space: normal;`(默认换行) - `white-space: pre;`(保留空格和换行) - `white-space: nowrap;`(不换行) ### 四、边框样式 #### 1. 边框宽度 (Border Width) - `border-width: 2px;`(设置边框...

Global site tag (gtag.js) - Google Analytics