Why does the styling make an element dissappear?

Question:
I’m making a flappy bird clone and I’m trying to code the pipes (obstacles) but when I apply a style to move the pipe to a different location it dissappears

Repl link:
https://replit.com/@JohnnySuriano/Flappy-Space#flappy.css

Working Code

    function generateObstacle() {
        let obstacleLeft = 500
        let obstacleBottom = 150
        const obstacle = document.createElement('div')
        obstacle.classList.add('obstacle')
        gameDisplay.appendChild(obstacle)
    }
    
    generateObstacle()

Non Working Code

    function generateObstacle() {
        let obstacleLeft = 500
        let obstacleBottom = 150
        const obstacle = document.createElement('div')
        obstacle.classList.add('obstacle')
        gameDisplay.appendChild(obstacle)
        obstacle.style.left = obstacleLeft + 'px'
        obstacle.style.bottom = obstacleBottom + 'px'
    }
    
    generateObstacle()

I think you want to set position on .obstacle to relative instead of absolute?

1 Like

Found the error turns out in .game-container I used width twice instead of width and height

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.