如何在调整屏幕大小时使元素停止移动
How to make elements stop from moving when the screen is resized
我有一个容器,它有一个背景图像,背景图像上有标记/"元素"。当我调整屏幕大小时,我需要标记在相同的位置。我试图让它做出响应,但当我调整窗口的大小时,元素似乎没有就位。
我知道这是因为背景图像会移动,我需要将图像中的所有元素锁定在同一位置。
http://codepen.io/Sonick/pen/huqrl
.container {
background: url("http://armsonick.zz.mu/Demos/ImageHost/images/1381607643scene1.png") no-repeat scroll center top transparent;
color: #000000;
height: 535px;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 1030px;
}
.dialog {
background-color: rgba(163, 154, 77, 0.9);
color: #FFFFFF;
display: none;
height: 140px;
left: 343px;
line-height: 24px;
padding: 100px 30px;
position: absolute;
text-align: center;
top: 97px;
width: 280px;
z-index: 10;
-moz-border-radius: 170px;
-ms-border-radius: 170px;
-o-border-radius: 170px;
-webkit-border-radius: 170px;
border-radius: 170px;
}
.dialog .close {
color: black;
background-color: #65683b;
cursor: pointer;
font-size: 22px;
font-weight: bold;
height: 36px;
line-height: 36px;
position: absolute;
right: 10px;
top: 60px;
width: 36px;
-moz-border-radius: 18px;
-ms-border-radius: 18px;
-o-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
}
.labels p {
display: none;
}
.labels div {
background-color: rgba(203, 189, 58, 0.8);
color: #FFFFFF;
display: none;
height: 50px;
padding: 30px 0 0;
position: absolute !important;
text-align: center;
text-decoration: none;
width: 80px;
-moz-border-radius: 40px;
-ms-border-radius: 40px;
-o-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.labels > div {
background-color: rgba(203, 189, 58, 0.8);
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
.labels div:hover {
background-color: rgba(128, 128, 128, 0.8);
}
.labels div span {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 15px solid rgba(203, 189, 58, 0.8);
bottom: -14px;
height: 0;
left: 30px;
position: absolute;
width: 0;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
.labels div:hover span {
border-top: 15px solid rgba(128, 128, 128, 0.8);
}
#label1 {
left: 720px;
top: 215px;
}
#label2 {
left: 495px;
top: 290px;
}
#label3 {
left: 450px;
top: 115px;
}
#label4 {
left: 270px;
top: 170px;
}
#label5 {
left: 570px;
top: 65px;
}
#label6 {
left: 275px;
top: 30px;
}
问题是body
的背景(div
元素被设计为与之对齐)居中对齐,而这些div的absolute
定位只能从包含div的顶部/左侧进行。这意味着当容器小于背景图像时,对齐将关闭。
相反,您需要将背景图像与div
元素对齐到相同的锚点,这样才能工作;top
/left
:
body {
background: url(http://pcvector.net/uploads/demo/scripts/layout_and_interface/isometric_interactive/images/scene.jpg) left top no-repeat;
}
更新示例
问题是您将.container
元素设置为固定宽度(1030px)。因此,在小于1030px的屏幕上,元素对视口没有响应。
将.container
更改为max-width:1030px;
,而不是width:1030px
http://jsfiddle.net/ggChris/jjk52j7q/
要创建响应式设计,必须在css属性中使用%
,而不是px
我的意思是,你有这个:
#label1 {
left: 720px;
top: 215px;
}
但它应该是:
#label1 {
left: 69%;
top: 40%;
}
希望能有所帮助。
相关文章:
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- 将元素移动到右侧,然后返回到左侧
- 将jQuery draggable()元素移动到新的父元素
- Jquery-将图像从一个元素移动到另一个元素
- Css-是否可以在调整屏幕大小时使元素移动,以使其适合屏幕
- 制作元素移动的动画
- 如何将较低的z级元素移动到透明png下方
- SVG文本锚点设置使文本元素移动
- 如何将元素移动到鼠标位置
- d3:应用 scale() 变换时元素移动
- jQuery UI 工具提示在源 DOM 元素移动时卡住打开
- 如何在页面上选择文本块,然后将元素移动到其前面
- 下拉列表使元素移动
- 将一个元素移动到另一个元素中,其余元素将转到第三个位置
- 将最后一个元素移动到数组中的第二个项目的最快方法
- Javascript以可变的角度和速度为元素移动制作动画
- 在 JavaScript 中将数组元素移动到变量
- 使用jQuery单击时将元素移动/复制到另一个位置
- 将排序数组的数组元素移动到具有特殊逻辑的另一个位置
- 如何跟踪元素移动和特定位置的触发功能