Question

我在页面中有一张金鱼的照片，但是当我更改位置值时它不会移动

#goldfish {
    position: absolute;
    top: 100px;
    left: 300px;
    right: 400px;
    width: 50px;
    height: 50px;

它位于页面的左上角，我无法将其移动到其他地方

我只能使用CSS / HTML和Javascript

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>Mobile App 1</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="apple-touch-icon" href="../images/circle180.png" />
    <meta name="viewport" content="width=device-width,inital-scale=1.0, user-scalable=no">
    <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    canvas {
        margin: auto;
    }
    
    #goldfish {
        position: absolute;
        top: 100px;
        left: 300px;
        right: 400px;
        width: 50px;
        height: 50px;
    }
    
    #star {
        position: fixed;
        top: 425px;
        left: 250px;
        right: 200px;
        width: 50px;
        height: 50px;
    }
    
    #silverfish {
        position: absolute;
        top: 100px;
        left: 100px;
        right: 100px;
        width: 50px;
        height: 50px;
    }
    
    body {
        position: fixed;
        background-image: url("http://i68.tinypic.com/2ijrpt4.png");
        background-size: 1000px 600px;
    }
    </style>
    <script language="javascript" type="text/javascript" src="http://class.arts.ucsb.edu/~art102/includes/p5/p5.js"></script>
    <script>
    var r, g, b;
    var goldfishobject;
    var xvalue = 0;
    var yvalue = 0;
    var zvalue = 0;
    var silverfisheobject;

    function setup() {

        goldfishobject = document.getElementById("goldfish");
        silverfishobject = document.getElementById("silverfish");

    }

    function draw() {
        xvalue = rotationX
        yvalue = rotationY
        zvalue = rotationZ
        subx = rotationY;
        suby = rotationZ;
        subz = rotationX;
        goldfishobject.style.top = xvalue + "px";
        goldfishobject.style.left = yvalue + "px";
        goldfishobject.style.right = zvalue + "px";
        silverfishobject.style.top = subx + "px";
        silverfishobject.style.left = suby + "px";
        silverfishobject.style.right = subz + "px";
    </script>
</head>

<body>
    <span id="goldfish">
      <img src="http://i65.tinypic.com/t8lt6t.png" width="200">
    </span>
    <span id="star">
      <img src="http://i68.tinypic.com/2hrhkj8.png" width="150">
    </span>
    <span id="silverfish">
      <img src="http://i63.tinypic.com/33k82zl.png" width="150">
    </span>
</body>

</html>

＆＃13;

Answer 1

使用保证金，它会起作用。

rbp-4

Answer 2

css工作正常，你只需要改变位置值。我没有看到任何错误。

例如：

#goldfish {
  position: absolute;
  top: 200px;
  left: 300px;
  width: 50px;
  height: 50px;
}

<!DOCTYPE html>
<html>

<head>
    <title>Mobile App 1</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="apple-touch-icon" href="../images/circle180.png" />
    <meta name="viewport" content="width=device-width,inital-scale=1.0, user-scalable=no">
    <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    
    canvas {
        margin: auto;
    }
    
    #goldfish {
        position: absolute;
        top: 200px;
        left: 300px;
        right: 400px;
        width: 50px;
        height: 50px;
    }
    
    #star {
        position: fixed;
        top: 425px;
        left: 250px;
        right: 200px;
        width: 50px;
        height: 50px;
    }
    
    #silverfish {
        position: absolute;
        top: 100px;
        left: 100px;
        right: 100px;
        width: 50px;
        height: 50px;
    }
    
    body {
        position: fixed;
        background-image: url("http://i68.tinypic.com/2ijrpt4.png");
        background-size: 1000px 600px;
    }
    </style>
    <script language="javascript" type="text/javascript" src="http://class.arts.ucsb.edu/~art102/includes/p5/p5.js"></script>
    <script>
    var r, g, b;
    var goldfishobject;
    var xvalue = 0;
    var yvalue = 0;
    var zvalue = 0;
    var silverfisheobject;

    function setup() {

        goldfishobject = document.getElementById("goldfish");
        silverfishobject = document.getElementById("silverfish");

    }

    function draw() {
        xvalue = rotationX
        yvalue = rotationY
        zvalue = rotationZ
        subx = rotationY;
        suby = rotationZ;
        subz = rotationX;
        goldfishobject.style.top = xvalue + "px";
        goldfishobject.style.left = yvalue + "px";
        goldfishobject.style.right = zvalue + "px";
        silverfishobject.style.top = subx + "px";
        silverfishobject.style.left = suby + "px";
        silverfishobject.style.right = subz + "px";
    </script>
</head>

<body>
    <span id="goldfish">
      <img src="http://i65.tinypic.com/t8lt6t.png" width="200">
    </span>
    <span id="star">
      <img src="http://i68.tinypic.com/2hrhkj8.png" width="150">
    </span>
    <span id="silverfish">
      <img src="http://i63.tinypic.com/33k82zl.png" width="150">
    </span>
</body>

</html>

Answer 3

你可以将金鱼移到你想要的地方。左侧位置适用于正值，右侧和下侧适用于负值。

#goldfish {
    position: absolute;
    top: 100px;
    left: 0px;
    right: -400px;
    width: 50px;
    height: 50px;
    }

CSS位置不起作用

3 个答案: