项目中用到首页面背景为图片，但是登录所需的用户名和密码放在了页面div上，如果拖拽浏览器的窗体div会跟着一起动，怎
样才能解决这个问题呢？css样式解决了这个问题。
样式代码：
<style>
.container_center1 { position:absolute;
left:expression((body.clientWidth-300)/2+20);
top:expression((body.clientHeight)/2-50);
width:300px;
</style>
页面部分代码：
<body style="background-image:url(images/login.jpg);background-repeat:no-repeat;background-position:center;">
<div class="container_center1">
<!-- onsubmit="return validate(this)" -->
<form method="post" action="<%=path %>/indexAction!login.action" name="frmLogin" target="_self" >
<table class="tb_login">
<tr>
<td align="right" class="STYLE2">用户名：</td>
<td colspan="2" align="left" ><input id="userName" name="userName" type="text" class="input_name_pwd"/></td>
<td></td>
</tr>
<tr>
<td align="right" class="STYLE2">密 码：</td>
<td colspan="2" align="left"><input id="abcd" name="abcd" type="password" class="input_name_pwd"/></td>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="right" class="STYLE2">验证码：</td>
<td colspan="2" align="left"><input name="picturerand" type="text" class="picture_rand" id="picturerand" maxlength="4" width="40"/>
<img src="<%=path %>/servlet/picturerand" id="imgcode" alt="看不清？换一张" width="80" height="25" onClick="imageupdate()" >
</td>
<td> </td>
</tr>
<tr>
<td colspan="4" style=" padding-left: 12px;"><input id="btnSubmit" type="submit" name="btnSubmit" class="enter" value="" />
<input name="btnReset" type="reset" class="sq" value=""/>
</td>
</tr>
</table>
</form>
<div >
<table width="300px;">
<tr>
<td align="center"><div id="error" style="color:red"> ${errormessage} </div></td>
</tr>
</table>
</div>
</div>
</body>
这样的话就可以解决页面div就相对背景图片固定住了。
分享到：
相关推荐
在Vue应用中，有时我们需要获取页面元素的相对位置，以便实现一些交互效果，如固定定位、滚动监听等。本篇文章将详细讲解如何在Vue中获取元素的相对位置，并提供示例代码。 首先，`getBoundingClientRect()` 是...
初始状态下，导航菜单可能被设置为相对定位，随着页面滚动，通过JavaScript改变其定位为固定（`position: fixed`），这样即使用户滚动页面，菜单也会保持在屏幕的某个位置。同时，为了适应不同的屏幕尺寸，可能还...
本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局，并确保在各种浏览器中都能实现中间内容的居中显示。 首先，我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域（content）、内边距（padding...
在网页开发中，有时我们需要创建一个元素（如一个`<div>`），让它在用户滚动页面时始终保持在浏览器的特定位置，这种效果被称为“固定定位”（Fixed Positioning）。本实例将通过JavaScript实现一个`<div>`元素相...
2. 层叠和定位：通过`position`属性设置元素的位置，如`relative`（相对定位）、`absolute`（绝对定位）或`fixed`（固定定位），配合`top`、`right`、`bottom`、`left`属性调整位置。 3. 显示和隐藏：使用`display`...
“锁定页面”是指保持页面内容在用户滚动时保持相对固定的位置，这通常通过CSS的`position: fixed`属性来实现。当一个元素的定位设置为固定时，它会相对于浏览器窗口进行定位，即使页面滚动，该元素也会保持在屏幕的...
标题中的"jquery简单实现滚动条下拉DIV固定在头部不动"描述了一个常见的网页设计功能，即当用户滚动页面时，某个特定的DIV元素（在这个例子中是类名为`.pf`的元素）会在达到预设位置（这里是250像素）后，始终保持在...
2. **定位与布局**：通过定位机制（如静态、相对、绝对、固定定位），CSS可以控制元素在页面上的位置，实现流式布局、网格布局、响应式设计等多种布局方式。 3. **盒模型**：CSS盒模型包括元素的内容、内边距、边框...
- CSS设计：通过CSS定义Div的样式，如背景颜色、边框、内边距等，以及定位方式（如绝对定位或固定定位）。 - JavaScript控制：通过JavaScript事件监听（如点击按钮）触发弹出层的显示和隐藏。可以使用`style.display...
标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”，这揭示了在Web开发中，尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时，开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为，...
它在不浪费流量的情况下，能够实现页面内容的动态加载，提供良好的用户体验。 **一、瀑布流的基本原理** 瀑布流布局的核心是利用CSS的浮动（float）和定位（position）属性，以及JavaScript（或jQuery）进行动态...
3. **定位**：CSS提供相对定位（relative）、绝对定位（absolute）、固定定位（fixed）等方式，使元素在页面上的位置可以灵活控制。 4. **浮动**：浮动（float）主要用于创建多列布局，元素可以向左或向右浮动，以便...
这意味着即使用户滚动页面，fixed元素的位置也会保持不变，始终固定在屏幕的某个位置。例如，一个顶部导航栏可以设置为fixed，以便在用户滚动页面时始终保持在屏幕顶部。 在使用这些定位方式时，`top`、`bottom`、`...
5. **固定定位（Fixed Positioning）**：元素的位置相对于浏览器窗口，即使在滚动页面时，元素也会保持在屏幕的特定位置。 6. **z-index**：在定位元素中，z-index属性控制元素的堆叠顺序，数值越大，元素越靠前，...
5. 定位机制：学习静态定位、相对定位、绝对定位和固定定位，理解各定位方式的特点和应用场景，以及z-index属性在层叠上下文中的作用。 6. CSS3新特性：介绍CSS3引入的新功能，如圆角、阴影、渐变、过渡、动画、多...
例如，一个相对定位的div元素可以向右偏移20像素，但它的原始位置仍然会被占用，导致其他元素根据这个偏移后的位置调整。 3. **absolute**： - 绝对定位使元素脱离正常文档流，它的位置基于最近的已定位父元素（非...
CSS提供了绝对定位（absolute）、相对定位（relative）和固定定位（fixed）等方法，用于精细控制元素的位置。这些定位方式各有特点，可以根据实际需求选择合适的定位策略。 1. 绝对定位：元素脱离正常文档流，根据...
DIV与CSS布局是现代Web开发中不可或缺的一部分，它们能够帮助开发者创建响应式、灵活且易于维护的网页布局。随着移动设备的普及以及用户对网站美观度要求的提高，掌握DIV与CSS布局技巧变得尤为重要。 #### 三、固定...
固定宽度布局的优点在于设计时可以精确控制元素的位置和大小，但缺点是对不同分辨率和设备的适应性较差，可能在小屏幕设备上显示不理想。 另一方面，自适应（弹性）宽度CSS版式布局，也称为响应式设计，是现代网页...
4. **定位**：掌握`position`属性，包括静态、相对、绝对和固定定位，以及如何通过`top`、`right`、`bottom`和`left`属性调整元素位置。 5. **Flexbox布局**：学习新的弹性盒模型，用于创建动态和响应式的布局，...