`
tianjun309
  • 浏览: 368297 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

CSSXHTMLHTMLXML 
阅读更多 
<!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;
}

 

分享到：
| CSS 文字替代图片下载失败情况
评论
发表评论

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

相关推荐

    鼠标经过显示隐藏div

    在Web开发中，通过JavaScript（简称JS）和CSS结合可以实现很多动态效果，其中“鼠标经过显示隐藏div”就是一个非常实用的功能。本文将详细解析如何利用这些技术来实现一个响应鼠标事件、能够显示和隐藏特定元素（本...

    javascript实现显示和隐藏div方法汇总

    在JavaScript中，显示和隐藏`div`元素是前端开发中常见的需求。本篇文章将汇总15种不同的方法来实现这一功能。以下是对这些方法的详细解释： 1. **`display: block/none`**： - `display: block`使元素呈现在页面...

    div css移动鼠标改变样式弹出div层

    通过这种方式，我们可以实现一个简单的交互效果，当用户将鼠标移到主内容区域上时，一个包含相关信息的弹出层会以动画形式显示出来。这种技术常用于制作提示框、下拉菜单或其他需要交互反馈的网页元素。 在实际项目...

    【JavaScript源代码】js实现鼠标移入移出卡片切换内容.docx

    本文将深入探讨如何使用JavaScript实现一个实用且美观的鼠标移入移出卡片切换内容的功能，并通过具体示例来展示其实现过程。 #### 一、项目概述 本案例旨在创建一个响应式的卡片菜单系统，当用户鼠标移入卡片时，...

    图片onmouseover 和onmouseout 事件，根据图片不同大小显示不同大小的div，鼠标移上去显示该图片详细信息

    在CSS中，可以通过设置`display`属性来控制div的可见性，将其默认设置为`none`以保持隐藏，然后在`onmouseover`事件中将其更改为`block`或`inline-block`以显示div。 `onmouseout` 事件则是在鼠标离开该元素时触发...

    js实现弹出div任意拖拽

    当然，实际应用中可能还需要考虑更多的细节，比如防止div移出视口、边界限制、拖动过程中div的透明度变化等。通过不断优化和调整，我们可以创建一个更完善的拖拽功能，提升用户的交互体验。 在这个过程中，你可能...

    CSS鼠标悬浮DIV后显示DIV外的按钮解决方法

    首先，我们遇到的问题是，当鼠标离开原始的DIV区域而移动到悬浮显示的按钮上时，由于CSS的`:hover`伪类只在鼠标在元素本身上时生效，因此按钮会立刻消失。为了解决这个问题，有两种主要的方法： 1. 扩大触发区域的...

    jquery简单的div层提示信息

    5. **内容填充**：提示div的内容可以从多个来源获取，比如HTML中的静态文本、属性值（如`title`），或者是通过Ajax动态加载。 6. **样式设计**：`index.html`文件中的CSS部分负责提示div的样式设计，包括背景色、...

    div模拟弹出窗口，web2.0体现

    关闭窗口的方法可以是将div的display属性设为none，或者改变其CSS的position属性使其移出可视区域。 总结来说，"div模拟弹出窗口，web2.0体现"涉及的关键技术包括： 1. 使用HTML div创建窗口结构。 2. 通过CSS进行...

    js移动层和跟随鼠标的div

    // 防止div移出视口 var leftPos = Math.max(0, event.clientX - (floatingDiv.offsetWidth / 2)); var topPos = Math.max(0, event.clientY - (floatingDiv.offsetHeight / 2)); floatingDiv.style.left = ...

    Cesium 地图显示鼠标经纬度和高度

    此外，为了显示这些信息，可以在HTML中添加一个元素，比如`&lt;p&gt;`或`&lt;div&gt;`，并用JavaScript动态更新其内容。这可以通过操作DOM节点的`innerText`或`textContent`属性完成。 最后，记得在完成操作后解除事件监听，以...

    可以拖动的DIV

    标题中的“可以拖动的DIV”指的是在网页开发中实现的一个功能，允许用户通过鼠标拖动来改变HTML中&lt;div&gt;元素的位置。这个功能通常通过JavaScript或者jQuery等库来实现，为用户提供更直观、交互性更强的界面体验。在...

    通用弹出可移动的DIV块

    在网页设计和开发中，"通用弹出可移动的DIV块"是一种常见的交互元素，它允许用户通过JavaScript或jQuery等库动态创建、显示和移动一个包含内容的div元素。这种功能广泛应用于模态对话框、提示窗口或者自定义菜单等...

    jquery鼠标移到Image上方时显示文字效果

    这个功能是通过结合jQuery事件监听器和CSS样式来创建的，当用户将鼠标悬停在图片上时，会在图片底部显示相关信息，通常这些信息可能是图片的描述或标题。当鼠标离开图片时，这些文字会自动消失。 首先，我们需要在...

    js鼠标滑过图片，在图片上方蒙上一层透明层显示详情内容

    在JavaScript（JS）编程中，实现“鼠标滑过图片，在图片上方蒙上一层透明层显示详情内容”的功能是一项常见的交互设计。这个功能可以提升用户体验，让用户在不离开当前页面的情况下查看图片的相关信息。下面我们将...

    js判断鼠标位置是否在某个div中的方法

    在使用onmouseout事件时，有时会遇到一个问题：当鼠标从div移出到div中的其他内容（例如下拉菜单或者内嵌的可交互元素）时，onmouseout事件也会被触发，这可能导致一些不期望的行为，比如div意外被删除。为了解决这...

    Web页面div盒子拖动的实现

    `当内容超出div时显示滚动条。 ```css .dragBox { width: 200px; height: 200px; border: 1px solid #ccc; padding: 10px; position: relative; overflow: auto; } ``` 3. **JavaScript事件处理**：实现拖放...

    网页弹出div层的js-javascript

    网页弹出div层的技术在网页开发中非常常见，主要用于创建模态对话框、提示信息或者加载新内容。这种技术利用JavaScript进行实现，结合HTML和CSS，可以为用户提供丰富的交互体验。下面将详细介绍如何使用js-...

    jQuery创建div层自由拖动布局代码

    在实际项目中，可能还需要考虑更多的边界条件，比如防止div移出父容器或者调整尺寸超出屏幕。另外，还可以添加动画效果以提升用户体验。 总之，jQuery提供了一套强大的工具来处理DOM操作和事件，使得创建交互式的...

Magicbox
Global site tag (gtag.js) - Google Analytics