通过position将div中的内容移出显示 - 田军的专栏 - ITeye博客

`

tianjun309

浏览: 358821 次
性别:
来自: 深圳

最近访客更多访客>>

seavisiocode

u011045451

caiman0827

fly_mans

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

hijackwust：最次的方法，没有之一
让一个工程并存jar包不同版本
手写白： ...
让一个工程并存jar包不同版本
wqsmd1：连接不会关，怎么弄
Struts2 + JasperReports4 + DB2 Demo
tntxia：楼主，怎么没有放keymaker.jar这个包啊
Aqua Data Studio 破解及解决乱码说明
mrsea2010：楼主，按照你的方法，点击联接，我都不能显示出页面，直接报404 ...
Struts2 + JasperReports4 + DB2 Demo

通过position将div中的内容移出显示

博客分类：

html & Css

CSS XHTML HTML XML

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > 
<head><title>Left Marginal</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="site.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="page.css"   media="all"    type="text/css" />
 <link rel="stylesheet" href="print.css"  media="print"  type="text/css" />
</head>

<body>

 <h1>Left Marginal</h1>
 <div class="left-marginal">
  <h2 class="marginal-heading">Heading</h2>
  You want to excerpt an element and move it into the left margin.</div>

  
</body>
</html>

CSS:

*.left-marginal {
    position: relative;
    margin-left: 200px;
}
/*
* 相对上面来左移200px 这样可以将h2中的内容移出div，进行相对定位
*/
*.marginal-heading {
    position: absolute;
    left: -200px;
    top: 0;
    margin: 0;
}

分享到：

getHibernateTemplate 获取值为NULL | CSS 文字替代图片下载失败情况

2010-12-03 00:00
浏览 1016
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

div的position属性: 如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行...

div+js分页效果: js函数通过要显示的div var eventSizez//总页数 var currentPosition = 0; //初始位置 //下一个正在办理事项办理情况 function next() { if(currentPosition ){ $('#div'+currentPosition).hide(); current...

div弹出层position属性小解: div弹出层position属性小解

CSS的position属性在DIV层中的应用: 定位的话，父DIV设置position:relative后，子DIV的position:absolute就会相对父DIV作绝对定位，接下来为大家介绍下CSS的position属性在DIV层中的应用

css中position:fixed实现div居中上下左右居中: 实现div居中的方法多如牛毛，本例为大家介绍的这个方法是使用css中position:fixed来实现div上下左右居中，这个小技巧比较使用，大家看看

通过position定位实现div底端对齐: 主要介绍了通过position定位实现div底端对齐，感兴趣的朋友可以参考下

Div 制作的SELECT: // 隐藏的select 用DIV替换显示 selects[i].parentNode.insertBefore(select_divTag,selects[i]); // 创建 DIV 显示Selectd Option 值 select_info = document.createElement('div'); select_info.id ...

妙用z-index让一个div显示在最前面: position定位如果有重叠的时候，z-index愈大，就显示在最上面此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面

css中position:fixed实现div在窗口上下左右居中: 上下左右居中代码如下复制代码代码如下: div{ position:fixed;...其实，实现这个效果并不复杂，利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧：代码如下复制代码代码如下: <style typ

div背景半透明，覆盖整个可视区域的遮罩层效果: html代码很简单 <div class=mask></div> 1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha ...但是这样做当内容超过一屏时只有IE6下显示的效果是我们所期望的，在其他浏览器中首屏

借助CSS定位来实现把一个DIV放到另一个div右下角: 借助CSS定位来实现，你将右下角的那个DIV放在另一个DIV里面，参考代码如下示：复制代码代码如下: <div id=”box1″> <div id=”box2″>测试内容</div> </div> <style> <!– #box1{width:600px;height:600...

不定宽高的文字在div中垂直居中实现方法: 本人在面试的时候被问到：如何使一段不定宽高的文字垂直居中呢？现在来总结一下：在body中写入结构 <div id=main> <div id=login> ...position: relative; //在父元素中使用相对定位 width: 200px; height:

后盾网DIVCSS系列视频教程（24集）: 教程名称：后盾网DIV CSS系列视频教程（24集）课程目录：0.DIVCSS视频教程之css_11.DIVCSS视频教程之position定位属性Z_INDEX堆迭顺序10 DIV CSS视频教程之css背景属性11.DIV.CSS视频教程-表格样式12.DIV.CSS视频...

动态改变左侧Div宽度: 移动左边div可使其宽度自动改变 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> ; charset=gb2312"/> 无标题文档</title> ...

DIV滑动门代码: background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li...

DIV CSS布局中position属性用法深入探究: 本文向大家描述一下DIV CSS布局中的position属性的用法，position属性主要有四种属性值，任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative（相对）以及absolute（绝对）。如何学习DIV+CSS...

CSS 嵌套DIV布局(position属性): 如果内层DIV将position属性设置为absolute，并设置left，和top等属性，还需要考虑外层DIV的position属性设置。 absolute:absolute绝对定位，直接指定top、left、right、bottom。有意思的是绝对定位也是“相对”的。...

Global site tag (gtag.js) - Google Analytics